Select previous element using jQuery selector only

Question

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.

Can You please post- how you are using `.on` and where you would like to select previous element — Adil Shaikh, May 09 '13 at 06:16
You seem to be making this far more complex than it needs to be, there is no simple (CSS-like) selector for a previous element, is the previous element (in this case `.hitarea`) generated dynamically, or is there some other constraint you're working under? — David Thomas, May 09 '13 at 07:05

score 1 · Answer 1 · answered May 09 '13 at 06:15

1

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

answered May 09 '13 at 06:15

MaVRoSCy

17,747
15
82
125

Thanks using your code i can do it but It is not selector,It is method.I cant use it. – Rickyrock May 09 '13 at 06:39
what do you mean 'it is method. I cant use it '? – MaVRoSCy May 09 '13 at 06:44
on method is not allowed to pass object. $(document).on("click","SELECTOR",function(){}); – Rickyrock May 13 '13 at 06:26

score 0 · Accepted Answer · answered May 09 '13 at 06:53

0

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

You can use this as a selector:

$('#devicelist,.hitarea')

answered May 09 '13 at 06:53

Janak

4,986
4
27
45

1

Thanks,i do it this way. But still one question is that How we can select previous element using jQuery Selector? – Rickyrock May 13 '13 at 06:32
I must point out that this does not answer the original question. I have an extension scenario where I'd like an end user to be able to specify a selector that selects the previous sibling element (or any other selector), so using .prev() is not an option. If I find an answer, I'll post it here. – lightmotive May 06 '15 at 15:52
It looks like JQuery selector options are currently limited to selecting the **next** [sibling element](http://api.jquery.com/next-adjacent-selector/) or [sibling elements](http://api.jquery.com/next-siblings-selector/). There are no documented selectors for selecting **previous** sibling elements. Weird. – lightmotive May 06 '15 at 16:01

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

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

Select previous element using jQuery selector only

3 Answers3

Linked