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从$.get抓取完整的HTML大块，然后在成功回调中，我们在整堆HTML中找到id="foo"元素，并使用.html()然后使用#somediv的mutator格式将内容复制到.html()。

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

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

我不确定这是否有效，我没有设置好的测试用例，但.load documentation表示它应该可以正常工作。如果#foo不仅包含<div>，则您必须提出其他与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();
    });
});

AJAX加载div ID的子项

3 个答案: