Select previous element using jQuery selector only

I need to select the previous element using only a jQuery selector.

<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);
});

I want to select div which has class .hitarea. I am looking for something like $("#devicelist:div.hitarea")

It should be done only with a selector of jQuery.

回答1:

$('.hitarea') is also a selector.

You can use this as a selector:

$('#devicelist,.hitarea')

回答2:

you can use the prev() selector

Description: Get the immediately preceding sibling of each element in the set of matched elements, optionally filtered by a selector.

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

回答3:

First the on() method (as with all event-delegation) should be bound to the closest non-dynamically-added element to the intended target, as noted in the API:

In most cases, an event such as click occurs infrequently and performance is not a significant concern. However, high frequency events such as mousemove or scroll can fire dozens of times per second, and in those cases it becomes more important to use events judiciously. Performance can be increased by reducing the amount of work done in the handler itself, caching information needed by the handler rather than recalculating it, or by rate-limiting the number of actual page updates using setTimeout.

Attaching many delegated event handlers near the top of the document tree can degrade performance. Each time the event occurs, jQuery must compare all selectors of all attached events of that type to every element in the path from the event target up to the top of the document. For best performance, attach delegated events at a document location as close as possible to the target elements. Avoid excessive use of document or document.body for delegated events on large documents.

With this in mind (assuming that the ul or ol is present in the page when the jQuery runs initially) I'd suggest binding directly to that element:

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

rather than to the document itself.

As I noted in the comment, CSS lacks a previous-sibling selector and jQuery (so far as I yet know) has not compensated for that lack. This leaves an obvious solution of:

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

More concisely written as:

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

You could, of course, if you know the index (given that you're focusing on the second child element) simply use:

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