Javascript AJAX加载div ID'；孩子们

假设我有：

$('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>

---

如果您不介意手动使用和操作加载部件，则可以相当轻松地执行此操作，如下所示：

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

这将使用

$从
href
获取完整的HTML块。get

，然后在成功回调中，我们在整个HTML堆中找到

id=“foo”

元素，提取其内容，然后使用

.HTML（）

的变体形式将内容复制到

#somediv

如果您知道

#foo

只包含

子项，那么您可以尝试以下方法：

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

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

我不确定这是否会起作用，我也没有一个像样的测试用例，但测试结果表明它应该起作用。如果

#foo

不只包含

s，那么您就必须想出一些其他方法来使用。当然，如果

#foo

包含未包装在元素中的文本，那么我认为您必须使用

$。获取上面的方法。
您可以尝试以下方法：

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

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

通过使用后跟星号的
选择器，只能加载锚点的子级：

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

@太好了，谢谢。您能否检查子选择器是否与
.load
一起工作？
$.get
方法可能更安全，更能证明未来。我还没有测试过它，但我想不出为什么它不会。但是
*
会在整个子树（请参阅）中下降，而不仅仅是一个级别，因此可能会造成一点混乱，它也不会捕获顶级文本节点。@mu太短了，谢谢您的建设性建议。我是一个初学者，所以我需要知道更多，这类建议在现在和将来都是可以期待的。再次感谢。继续帮助。。请