jquery选择某些';级别';元素?

jquery选择某些';级别';元素?,jquery,css-selectors,Jquery,Css Selectors,假设我有以下标记: <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 s

假设我有以下标记:

<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>

假设如下

  • 我想找到的元素都处于相同的嵌套级别
  • 我可能不知道具体的嵌套元素是什么(因此不能使用特定的选择器)
…是否有一种聪明的方法来选择“第一个锚定标记,以及嵌套在同一级别的所有其他锚定标记”,以便返回第一、第三和第四个链接


更糟糕的情况是,我们需要加入一些特定的类到我们的HTML中,但如果这可以通过纯选择器来实现,那就太好了

如果要选择h3下的所有链接:

var $links = $('h3 a');
编辑: 对不起,我显然没有仔细阅读。也许您可以尝试以下方法(注意,此方法未经测试):


签出和。

不是纯选择器,但如何:

var depth = $('#myanchor').parents().length;
var all_at_depth = $("a").filter( function() { $(this).parents().length == depth; } );
如果有帮助,可以使用parentsUntil()获取#myanchor和特定父对象之间的距离。

如何


}))

我编写了这个jQuery函数,应该可以完成这项工作

例如:

$.extend({
/**
*返回同一DOM深度上相同元素的集合
*
*引用元素的@param{string}选择器
*@param[{string}父对象,默认为正文]
*@returns{jQuery}元素集
*/
getSameLevelElements:函数(选择器、父级){
如果(父项的类型=='undefined'){
父项='body';
}
var el=$(选择器).first();
如果(标高长度<1){
返回$();
}
变量深度=el.parents(parents+'*')长度;
对于(变量i=0;i'+el.get(0.tagName.toLowerCase();
返回$(选择器);
}
});
使用属性类

<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>

对,但这就是我现在想要的。我试图避免使用特定的选择器,因为我不一定知道元素将嵌套在什么中。我想说的是,您应该在元素上放置一个类。这是解决这个问题最不脆弱的方法。我确信你是正确的。我认为强制更改标记是最好的选择。也就是说,现在我很好奇。所以现在我认为这更像是一个脑筋急转弯,而不是有用的代码;o) 问题是他们不是兄弟姐妹。然而,如果我知道嵌套的具体级别,我可以遍历备份,抓取兄弟,然后在其中找到(:first)。但是在这个场景中,我不知道我要寻找的第一个对象的嵌套的具体级别。s不是兄弟,但你要找的是,但我不太明白如果我知道第一个锚点嵌套的只有一个元素深,这如何避免第二个。问题是,他是否希望跨父元素工作?如果没有,这将起作用。如果他在本例中有其他
div>h3>a
,并且想要选择那些
a
,这将不起作用。此外,如果第一个
a
正好位于他的目标
div
下,这将突破该div,并返回其他内容。@DA,根据您的假设注释做出了该假设@斯图尔特B-是的,基于他的结构,我认为这确实有帮助!聪明的解决方案!我不认为这真的有效,请看这里的JSFIDLE:但不管怎样,这似乎取决于在一个嵌套级别上没有5个父元素,在另一个嵌套级别上也没有5个父元素。@Kzqai OP特别声明所有元素都处于同一嵌套级别。你是对的,我错把
.parents()
.parent()
,因此我犯了错误。有赏金。
var depth = $('#myanchor').parents().length;
var all_at_depth = $("a").filter( function() { $(this).parents().length == depth; } );
$(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));
$.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);

    }

});
<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>
$(".select").each(function(){
//functionality
});