javascript - .get() 不过滤特定的 css 选择器

Question

在我的 .get() 请求的回调中，我想过滤两个不同元素的内容。这是我的代码:

function loadPosts(url) {
    $.get(url, function(data) {
        data = $.parseHTML(data);

        nextPageUrl = $(data)
            .filter('#detailnav > .next > a')
            .attr('href');

        data = $(data)
            .filter('#content')
            .children();
        data.appendTo(container);

        […]

    }, 'html');
}

和 html:

<section id="#content">
    […]
</section>
<section id="detailnav">
    <span class="prev">
        <a href="link.php">Link</a>
    </span>
    <span class="next">
        <a href="link.php">Link</a>
    </span>
</section>

问题是没有返回 nextPageURL，但 .get() 肯定得到了它。

.get()-请求按预期工作，并且数据似乎直接被解析。问题似乎出在 nextPageURL 的 CSS 选择器上，因为它工作正常:

nextPageUrl = $(data)
    .filter('#detailnav')
    .find('.prev > a')
    .attr('href');

不幸的是，选择器最后将是一个变量，所以我无法控制最终会出现哪个选择器。

Answer 1

不要使用过滤器，而是使用查找。您只需要将内容包装在 div 中，这样 find 就可以工作了。

var html = $("<div/>");
html.html(data);
nextPageUrl = html
            .find('#detailnav > .next > a')
            .attr('href');

过滤器只是限制集合，它不查找子元素。