Question

我正在尝试通过jQuery的$ .ajax请求（没有ID）加载另一个网页的特定部分。

简单示例....

以下是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>

一些例子JQ：

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

但是，我想在#list中定位ul，但如果我将过滤器更改为＆＃39; #list ul＆＃39;什么都行不通这让我疯狂。我该如何定位这个元素？我尝试使用find代替过滤器，但这并没有带回任何东西。

干杯

Answer 1

filter()仅在目标选择器位于根级别时才有效，否则您需要使用find()

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

或者也可以使用以下内容，但效果并不高

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

Answer 2

更新了小提琴：http://jsfiddle.net/vKUD7/1/

<div id="container">
    <div>
        <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>
    </div>
</div>
<div id="list2">
    <ul></ul>
</div>

使用这个简单的代码来模拟从其他页面返回的数据：

var data = $('#container').html();

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

//Doesn't work
//$('#list2 ul').append($(data).filter('#list').children('ul').html());

另一个答案的第一部分也是正确的，你必须使用find递归遍历子元素，它将通过ID找到你的div然后允许你只在那个div中找到ul元素。

使用.filter和.children的第二部分似乎不起作用......

希望这有帮助！

使用jQuery ajax获取另一个页面的list元素

2 个答案: