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.

Answer 1

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).