0

我正在尝试通过 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，但是如果我将过滤器更改为“#list ul”，则没有任何效果。这让我疯狂。如何定位这个元素？我尝试使用 find 而不是 filter 但这也没有带来任何回报。

干杯

4

2 回答 2

0

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

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

或跟随也可以，但看起来效率不高

$('#list ul').append($(data).filter('#list').children('ul').html());
于 2013-01-24T12:55:55.423 回答
0

更新小提琴：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 的第二部分似乎不起作用......

希望这可以帮助！

于 2013-01-24T12:58:32.390 回答