AJAX 加载 div ID 的孩子

Question

假设我有这个：

$('a').each(function() {
    $(this).click(function(e) {
        e.preventDefault();
        var href = $(this).attr('href');
        $('#somediv').load(href + ' #foo');
    });
});

现在我如何让它加载 #foo 的内部内容而不是实际的 div #foo

还是不太明白我的意思？

<div id="foo">
    <!-- Load these divs only -->
    <div class="children">bar</div>
    <div class="children">bar</div>
    <div class="children">bar</div>
    <div class="children">bar</div>
    <div class="children">bar</div>
    <!-- // -->
</div>

我只想加载 div 的内部内容。非常感谢任何帮助！

编辑：已解决

我使用了 unwrap 方法：

parent.load(href + ' #' + ident + '', function() {
    $('#'+ident+' > div').children().unwrap();
});

Answer 1

如果您不介意使用 $.get 并手动执行加载部件，您可以相当轻松地完成此操作，如下所示：

$.get(href, function(html) {
    $('#somediv').html(
        $(html).find('#foo').html()
    );
});

这会使用$.get从href获取完整的HTML块，然后，在成功回调中，我们在整堆HTML中找到id="foo"元素，使用.html()提取其内容，然后复制使用.html()的mutator形式将东西放入#somediv。

如果您知道 #foo 将只包含 <div> 孩子，那么您可以试试这个：

$('#somediv').load(href + ' #foo > div');

我不确定这是否可行，并且我没有设置一个像样的测试用例，但.load documentation 表明它应该可以工作。如果#foo 不只包含<div>s，那么您将不得不想出与child selector (>) 一起使用的其他东西。当然，如果#foo 包含未包含在元素中的文本，那么我认为您会被上述$.get 方法所困扰。

Answer 2

您可以使用 > 选择器后跟星号来仅加载锚点的子项：

$('#somediv').load(href + ' #foo > *');

Answer 3

你可以试试这个：

$(this).click(function(e) {
    e.preventDefault();
    var href = $(this).attr('href');
    $('#somediv').load(href + '#foo *',
    function() {
        $('#somediv #foo').remove();
    });
});