jQuery如何选择特定“级别”的元素？

Question

jQuery如何选择特定“级别”的元素？

7

假设我有以下标记：

<div>
    <h3><a href="">link I want to select</a></h3>
        <div>
             <h3><a href="">link</a></h3>
        </div>
    <h3><a href="">link I want to select</a></h3>
    <h3><a href="">link I want to select</a></h3>
    <a href="">link</a>
</div>

假设以下情况...

我想要查找的元素都处于相同嵌套级别
我可能不知道具体的嵌套元素是什么（因此无法使用特定的选择器）

...有没有一种聪明的方法可以选择“第一个锚点标记以及所有其他嵌套在该同一级别的锚点标记”，以便返回第1、3、4个链接？

最坏的情况是，我们需要进入并仅通过纯选择器添加特定类到我们的HTML，但如果可以这样做，那将是很好的。

- DA.

7个回答

1

$('a:first').parent().siblings().children('a');

- Mark Schultheiss

1

如果我知道第一个锚点只嵌套了一个元素，那么这个方法就能用。 - DA.

问题是，他是否想要跨越父元素工作？如果不是，这将起作用。如果在此示例中有其他 div > h3 > a 并且想要选择那些 a，则这将无法起作用。 - Samantha Branham

此外，如果第一个 a 恰好在其目标 div 正下方，这将打破该 div 并返回其他内容。 - Samantha Branham

@DA，我是根据你的假设评论做出这个假设的。 @Stuart B - 是的，我只是根据他的结构做出了这个假设。 - Mark Schultheiss

1

这个链接怎么样？

$(function () {
// I take it you need some way to get the reference element.
var referenceElement = $('a').eq(0);
// Build the selector by making as many child selectors as our nesting level.
var selector = '';
var currentElement = referenceElement;
while (currentElement[0].parentNode !== document.body) {
    selector = (selector ? '* > ' + selector : '*');
    window.console && window.console.debug(currentElement, '!==', document.body, ' => ', currentElement.parent(), '; selector = ', selector);
    currentElement = currentElement.parent();
}
// Replace the tagName stuff with '*' if you want any element to match.
selector = 'body > ' + selector + ' > ' + referenceElement[0].tagName;
window.console && window.console.log(selector, ' => ', $(selector));

});

- janmoesen

1

查看siblings()和:first。

- Francisco Aquino

问题在于它们不是兄弟节点。但是，如果我知道特定的嵌套级别，我可以向上遍历，获取兄弟节点，然后在其中查找(:first)。但在这种情况下，我不知道我要查找的第一个对象的特定嵌套级别。 - DA.

<a>不是兄弟节点，但你要找的<h3>是兄弟节点，但我还无法确定这如何避免第二个<a>。 - David

0

我写了这个 jQuery 函数，应该可以完成工作。

示例：https://jsfiddle.net/xvcby8kL/2/

$.extend({

    /**
     * Returns set of same elements on the same DOM depth
     *
     * @param {string} selector of the referencing element
     * @param [{string} parent, body by default]
     * @returns {jQuery} set of elements
     */
    getSameLevelElements: function (selector, parent) {

        if (typeof parent === 'undefined') {
            parent = 'body';
        }

        var el = $(selector).first();

        if (el.length < 1) {
            return $();
        }

        var depth = el.parents(parent + ' *').length;

        for (var i = 0; i < depth; i++) {
            parent += ' > *';
        }

        selector = parent + ' > ' + el.get(0).tagName.toLowerCase();

        return $(selector);

    }

});

- Daniel Stejskal

0

使用 Class 属性

<div>
    <h3 class="select" ><a href="">link I want to select</a></h3>
        <div>
             <h3><a href="">link</a></h3>
        </div>
    <h3 class="select" ><a href="">link I want to select</a></h3>
    <h3 class="select" ><a href="">link I want to select</a></h3>
    <a href="">link</a>
</div>

Jquery：

$(".select").each(function(){
//functionality
});

- areeb

-1

如果您想选择 h3 下的所有链接：

var $links = $('h3 a');

编辑：抱歉，显然我没有仔细阅读。也许你可以尝试以下方法（请注意，这未经测试）：

var $links = $(div > * > a);

- Keith Rousseau

没错，但这不是我想要的。我试图避免使用特定的选择器，因为我不一定知道元素将嵌套在哪里。 - DA.

2

我建议您在元素上加一个类。这是解决这个问题中最不易受损的方法。 - Keith Rousseau

1

我相信你是正确的。我认为强制更改标记是最好的选择。话虽如此，现在我很好奇。所以现在我认为这更像是一个脑筋急转弯而不是有用的代码。;o) - DA.

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jlew · Accepted Answer

虽然不是纯选择器，但以下选择器是否可行：

var depth = $('#myanchor').parents().length;
var all_at_depth = $("a").filter( function() { $(this).parents().length == depth; } );

您可以使用parentsUntil()方法来获取#myanchor元素与特定父级之间的距离，如果有必要的话。