javascript - AJAX 加载 div ID 的 child

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 的内部内容。非常感谢任何帮助!

编辑:已解决

我使用了解包方法:

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

Answer 1

如果您不介意使用 $.get ，您可以很容易地做到这一点并手动完成加载部分，如下所示:

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

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

如果你知道#foo将只包含 <div> children ，那么你可以试试这个:

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

我不确定这是否可行，而且我没有设置合适的测试用例，但是 .load documentation表明它应该工作。如果#foo不只包含 <div>那么你就必须想出一些其他的东西来与 child selector ( > ) 一起使用.当然，如果#foo包含未包含在元素中的文本，那么我认为你被 $.get 困住了上面的方法。