JQuery: выберите элементы класса X, которые не имеют братьев и сестер с этим классом

Я хочу только выделить элементы, соответствующие классу X, и не иметь ни одного брата, который также имеет класс X. В моем случае X = hasDatepicker. Вот что я придумал:

$('.hasDatepicker:not(.hasDatepicker ~ .hasDatepicker)')

Однако это не исключает первый элемент, поэтому в любой группе datepickers это все равно будет выбирать первый. Я не хочу включать какие-либо группы, только синглы.

Пример с 1 Матч:

<div class="input text">
<input name="data[Goal][date_started]" type="text" value="" class="hasDatepicker" style="display: none; ">
<button type="button" class="ui-datepicker-trigger"><img src="/themed/mocha/images/btn_calendar.png" alt="..." title="..."></button>
</div>

Пример с 0. Матчи:

<div class="input text">
<input type="text" value="" id="GoalDateStarted" class="hasDatepicker"><input type="text" value="" class="hasDatepicker" style="display: none; ">
<input type="text" value="" class="hasDatepicker" style="display: none; ">
<input name="data[Goal][date_started]" type="text" value="" class="hasDatepicker" style="display: none; ">
<button type="button" class="ui-datepicker-trigger"><img src="/themed/mocha/images/btn_calendar.png" alt="..." title="..."></button>
</div>

Любые идеи? Спасибо!

Ответы

Ответ 1

Это не так уж элегантно, но он делает трюк с использованием псевдоселектора : first-child и фильтрации набора результатов с помощью .filter():

  • :first-child поможет выбрать только первый .test-элемент из списка возможных нескольких сестер

  • используйте .filter(), чтобы на самом деле проверить, нет ли братьев и сестер с тем же классом

Здесь код:

var a = $('.test:first-child').filter(function() {
    //return $(this).parent().find('.test').not(this).length == 0;
    return !$(this).siblings('.test').length
});

DEMO