jQuery Advanced Selector for Multiple Elements

Question

I am trying to add hidden class on two elements.

$("#grid").closest(".ui-jqgrid").addClass("hidden");
$("#grid").closest(".ui-jqgrid").prev("h3").addClass("hidden");

For the following markup,

<div class="col-sm-12">
    <h3>Heading 1</h3>
    <div class="ui-jqgrid  hidden" id="" dir="rtl" style="width: 1035px;">
        <div class="jqgrid-overlay ui-overlay" id=""></div>
        <div class="loading row" id="" style="display: none;"></div>
        <div class="ui-jqgrid-view" role="grid" id="">
            <div class="ui-jqgrid-titlebar ui-jqgrid-caption-rtl" style="display: none;">
                <a role="link" class="ui-jqgrid-titlebar-close HeaderButton " title="" style="left: 0px;">
                    <span class="ui-jqgrid-headlink glyphicon glyphicon-circle-arrow-up"></span></a>
                <span class="ui-jqgrid-title"></span>
            </div>

            <div class="ui-jqgrid-bdiv">
                <div style="position: relative;">
                    <div></div>
                    <table id="grid" class="ui-jqgrid-btable">
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

Can I do this in one line without finding the closest(".ui-jqgrid") twice? I don't want to add more classes to markup and also I don't want to use a JS variable here. Can anybody with strong selectors suggest a solution?

kapantzak · Accepted Answer · 2016-07-26 11:26:37Z

3

Just chain the methods. jQuery returns the manipulated object every time you call a method, so you can just call the next method on the returned object.

This is known as chaining

$("#grid").closest(".ui-jqgrid").addClass("hidden").prev("h3").addClass("hidden");

Explanation

$("#grid")  // returns #grid
.closest(".ui-jqgrid")  // returns .ui-jqgrid 
.addClass("hidden")  // returns .ui-jqgrid
.prev("h3")  // returns the previous h3 element of .ui-jqgrid
.addClass("hidden");  // returns the h3

UPDATE (Chained and no need for new class)

// Select the closest '.ui-jqgrid', find its parent and hide it's direct children ('h3' and '.ui-jqgrid' div)
$('#grid').closest('.ui-jqgrid').parent().children().addClass('hidden');

edited Jul 26, 2016 at 11:26

answered Jul 26, 2016 at 11:08

kapantzak

11.8k5 gold badges42 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Zeshan Munir Over a year ago

Thanks. Is there any way we can use addClass("hidden") only once?

kapantzak Over a year ago

Not in this way, addClass gets executed on differend elements each time

Zeshan Munir Over a year ago

Thanks for the updated ansers, actually as I mentioned above, I don't want to add more classes to markup.

Zeshan Munir Over a year ago

What about this one. Any effects on performance? $("#grid").closest(".ui-jqgrid").parent().find(".ui-jqgrid, h3, h4").addClass("hidden");

Zeshan Munir Over a year ago

why h4? I plan to use it for all headings eventually.

Jai · Accepted Answer · 2016-07-28 10:30:29Z

3

You can do this:

$("#grid").closest('.col-sm-12').find(".ui-jqgrid, h3").addClass("hidden");

As you have the id of the grid #grid the traverse up at the wrapper element of all then use .find() method which can take multiple comma separated selectors then add the class on the found elements.

As per your comment you can change to this:

$("#grid").closest('[class^="col-sm"]')

edited Jul 28, 2016 at 10:30

answered Jul 26, 2016 at 11:10

Jai

74.8k12 gold badges77 silver badges104 bronze badges

6 Comments

Jai Over a year ago

Yes! It does have performance boost as .find() is better than .prev() and it uses the addclass method just once. So, surely this is better.

Zeshan Munir Over a year ago

I am trying this one $("#grid").closest(".ui-jqgrid").parent().find(".ui-jqgrid, h3, h4").addClass("hidden");

Jai Over a year ago

This is also fine but you are traversing two times up one with closest and again with parent which seems to be odd to me. Although it would work.

Zeshan Munir Over a year ago

That's because the "ui-jqgrid, h3, h4" elements are the siblings of "ui-jqgrid" and I have to do add the same class to all of them. Any better alternatives?

Zeshan Munir Over a year ago

The problem is, "col-sm-12" is not the same in all my grids, and I am looking for a selector which works everywhere.

|

Collectives™ on Stack Overflow

jQuery Advanced Selector for Multiple Elements

2 Answers 2

5 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related