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()
    );
});

这从href使用中获取了大量的HTML $.get,然后,在成功回调中,我们id="foo"在整堆HTML中找到元素,提取其内容,.html()然后#somediv使用mutator形式复制内容.html().

如果您知道#foo只包含<div>儿童,那么您可以尝试这样做:

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

我不确定这是否有效,我没有设置好的测试用例,但是.load文档表明它应该可行.如果#foo不包含<div>s那么你将不得不想出一些与子选择器(>)一起使用的东西.当然,如果#foo包含未包含在元素中的文本,那么我认为你会坚持使用$.get上面的方法.