jquery выбирает определенный «уровень» элементов?

Question

Скажем, у меня есть следующая разметка:

<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, но это"было бы здорово, если бы это можно было сделать с помощью чистых селекторов.

Answer 1

Не чистый селектор, но как насчет:

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

Вы можете использовать parentUntil (), чтобы получить расстояние между #myanchor и конкретным родителем, если это поможет.

Answer 2

Как насчет этого ?

$(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));

});

Answer 3

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

Answer 4

Выезд братьев и сестер () и : первый .

Answer 5

Использовать атрибут 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
});

Answer 6

Я написал эту функцию 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);

    }

});

Answer 7

Если вы хотите выбрать все ссылки под h3:

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

Edit: Извините, я не читал это внимательно, по-видимому. Может быть, вы могли бы попробовать следующее (обратите внимание, это не проверено):

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