Выбрать предыдущий элемент, используя только селектор jQuery

Question

Мне нужно выбрать предыдущий элемент, используя только селектор jQuery.

<li class="collapsable">
    <div class="hitarea collapsable-hitarea"></div>
    <span id="devicelist" class="ankr">Device List</span>
    <ul id="ultree">
        <li type="dev" device="/dev/sdh1" id="dev0" class="litab">
            <img height="20px" width="20px" src="../Images/drive.png" class="dicon">
            <a class="ankr dn" href="#">'/dev/sdh1'</a>
        </li>
    </ul>
</li>

$(document).on("click","#devicelist,**Here Selector will be used**",this,function(event){
    console.log(this);
    console.log(event.target);
});

Я хочу выбрать div, который имеет класс .hitarea, Я ищу что-то вроде $("#devicelist:div.hitarea")

Это должно быть сделано только с помощью селектора jQuery.

Answer 1

$('.hitarea') также является селектором.

Вы можете использовать это как селектор:

$('#devicelist,.hitarea')

Answer 2

Вы можете использовать селектор prev()

Описание: Получить непосредственно предшествующий элемент каждого элемента в наборе соответствующих элементов, который может быть отфильтрован по выбору.

$('#devicelist').prev();

Answer 3

Сначала on() Метод (как и все делегирование события) должен быть связан с ближайшим нединамически добавленным элементом к намеченной цели, как отмечено в API:

В большинстве случаев такое событие, как щелчок, происходит нечасто, и производительность не является серьезной проблемой. Однако высокочастотные события, такие как движение мыши или прокрутка, могут срабатывать десятки раз в секунду, и в этих случаях становится более важным разумно использовать события. Производительность может быть увеличена за счет сокращения объема работы, выполняемой в самом обработчике, кэширования информации, необходимой обработчику, а не ее пересчета, или путем ограничения количества фактических обновлений страницы с помощью setTimeout.

Присоединение многих делегированных обработчиков событий в верхней части дерева документа может снизить производительность. Каждый раз, когда происходит событие, jQuery должен сравнивать все селекторы всех прикрепленных событий этого типа с каждым элементом в пути от цели события до верхней части документа. Для лучшей производительности прикрепляйте делегированные события в месте документа как можно ближе к целевым элементам. Избегайте чрезмерного использования document или document.body для делегированных событий в больших документах.

Имея это в виду (при условии, что ul или же ol присутствует на странице, когда jQuery запускается изначально) Я бы предложил привязку непосредственно к этому элементу:

$('ul').on(/* other stuff */);

а не к document сам.

Как я отмечал в комментарии, в CSS отсутствует селектор предыдущего брата, а jQuery (насколько я знаю) не компенсирует этот недостаток. Это оставляет очевидное решение:

$('ul').on('click', function(e){
    if (e.target.id == 'devicelist' || $('#devicelist').prev()) {
        // do stuff here
    }
});

Более кратко написано как:

$('ul').on('click', function(){
    var elem = $('#devicelist');
    if (elem || elem.prev()) {
        // do stuff here
    }
});

Конечно, вы можете, если вы знаете индекс (учитывая, что вы сосредотачиваетесь на втором дочернем элементе), просто использовать:

$('ul').on('click', function(e){
    if ($(e.target).index() < 2) {
        // do stuff here for the first two elements
    }
});