Getting portion of an html string with jQuery

Question

I have a javascript variable named response. This is the response from an ajax call. This variable has the following content:

<table id="ListCompanies" class="zebra-striped">

<thead>
    <tr>
        <th>Nom de la societe</th>
        <th>Ville</th>
        <th>Rue</th>
        <th width="70"><a class="btn primary small createCompany" href="/PLATON/Admin/Company/Create">[+] Nouvelle societe</a> </th>
    </tr>
</thead>

<tbody>
        <tr id="13">
            <td>INDUSTRIAL DEFENDER INC</td>
            <td>FOXBOROUGH</td>
            <td>Chestnut Street</td>

            <td nowrap>                                    
                <a class="btn small editCompany" href="/PLATON/Admin/Company/Edit/13" id="13">Modifier</a> 
                <a class="btn small deleteCompany" href="/PLATON/Admin/Company/Delete/13" id="13">Supprimer</a>
            </td>
        </tr>
        <tr id="14">
            <td>INC CRANE NUCLEAR</td>
            <td>GEORGIA KENNESAW</td>
            <td>cobb International Blvd</td>

            <td nowrap>                                    
                <a class="btn small editCompany" href="/PLATON/Admin/Company/Edit/14" id="14">Modifier</a> 
                <a class="btn small deleteCompany" href="/PLATON/Admin/Company/Delete/14" id="14">Supprimer</a>
            </td>
        </tr>
</tbody>

</table>



<a href="/PLATON/Admin/Company/RowsList?page=3" id="LoadMoreLink">Load more</a>

alert($("tbody", response).html()); gives me:

        <tr id="13">
            <td>INDUSTRIAL DEFENDER INC</td>
            <td>FOXBOROUGH</td>
            <td>Chestnut Street</td>

            <td nowrap>                                    
                <a class="btn small editCompany" href="/PLATON/Admin/Company/Edit/13" id="13">Modifier</a> 
                <a class="btn small deleteCompany" href="/PLATON/Admin/Company/Delete/13" id="13">Supprimer</a>
            </td>
        </tr>
        <tr id="14">
            <td>INC CRANE NUCLEAR</td>
            <td>GEORGIA KENNESAW</td>
            <td>cobb International Blvd</td>

            <td nowrap>                                    
                <a class="btn small editCompany" href="/PLATON/Admin/Company/Edit/14" id="14">Modifier</a> 
                <a class="btn small deleteCompany" href="/PLATON/Admin/Company/Delete/14" id="14">Supprimer</a>
            </td>
        </tr>

That's ok for me.

How can I get the link at the bottom #LoadMoreLink from the response variable?

I tried:

alert($("#LoadMoreLink",response));

But it didn't work.

gen_Eric · Accepted Answer · 2012-04-11 17:49:19Z

4

Your response contains 2 "parent" elements, the <table>, and the <a>. $(response) creates a jQuery object with 2 elements. To get the one you want, try this:

$(response).filter('#LoadMoreLink')

.find doesn't work here, as .find only searches children, not the "parent" elements themselves. You need to use .filter to search for the "parent" element.

(By "parent" element, I mean the element that's actually in the jQuery object).

answered Apr 11, 2012 at 17:49

gen_Eric

228k42 gold badges304 silver badges343 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Bronzato Over a year ago

You pointed me to the right direction. $(response).filter('#LoadMoreLink')[0].outerHTML gives me what I want. Question: why do I need to add [0].outerHTML ?? Thanks anyway.

Phrogz Over a year ago

@Bronzato You need the [0] because jQuery selections are special arrays of DOM elements, not the DOM elements themselves. Alternatively just use .html() to get the HTML.

gen_Eric Over a year ago

@Bronzato: The [0] gets the native DOM element from the jQuery object, and outerHTML gets you the element itself, whereas .html() (which is innerHTML gets you the contents of the element.

gen_Eric Over a year ago

@Bronzato: What are doing with this element? Chances are you don't need to use outerHTML, you can just use the jQuery object. For example: if you were appending this element, you could just do $('#someDiv').append($(response).filter('#LoadMoreLink')).

Bronzato Over a year ago

I need to get the anchor link from the response variable in order to replace the actual anchor on the page. So here is what I do: var updatedLink = $(response).filter('#LoadMoreLink')[0].outerHTML; $('#LoadMoreLink').replaceWith(updatedLink); What do you think?

|

devstruck · Accepted Answer · 2012-04-11 17:45:47Z

0

$("a", response).filter("[id='LoadMoreLink']")

Should be what you need. I think the normal search is failing because jQuery tries to access the DOM hash of elements with IDs, which "#LoadMoreLink" is not in (having not been loaded into the DOM yet).

answered Apr 11, 2012 at 17:45

devstruck

1,5078 silver badges10 bronze badges

1 Comment

gen_Eric Over a year ago

It doesn't matter if the element is in the DOM or not, #ID will act the same.

walmik · Accepted Answer · 2012-04-11 17:55:37Z

0

If nothing works out then simply load the response in a hidden div and then retrieve $("#LoadMoreLink")

answered Apr 11, 2012 at 17:55

walmik

1,4522 gold badges13 silver badges30 bronze badges

Collectives™ on Stack Overflow

Getting portion of an html string with jQuery

3 Answers 3

7 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related