Question

I am trying to load a specific portion of another web page via jQuery’s $.ajax request (that doesnt have an ID).

Simple example….

Here is example HTML:

<div id="list">
    <ul>
        <li>Foo 6</li>
        <li>Foo 7</li>
        <li>Foo 8</li>
        <li>Foo 9</li>
        <li>Foo 10</li>
    </ul>
</div>

And some example JQ:

$("#more").on("click", function(event){
    $.ajax({
        url: 'foo.html',
        datatype: 'html',
        success: function (data) {
            $('#list ul').append($(data).filter('#list').html());
        }
    })
    event.preventDefault();
});

However, I want to target the ul WITHIN the #list, but if I change the filter to be ‘#list ul’ nothing works. Its driving me crazy. How can I target this element? I tried using find instead of filter but that doesnt bring anything back either.

Cheers

Answer 1

filter() will only work if the target selector is at root level, otherwise you need to use find()

 $('#list ul').append($(data).find('#list ul').html());

OR following would also work but doesn’t appear as efficient

$('#list ul').append($(data).filter('#list').children('ul').html());