jQuery button click, get div with class

Question

I'm currently working on a client script in jQuery and I'm trying to make it as generic as possible.

I'm looking for a way to select a div with the class ".targets" from a button click.

My markup looks something like this:

<form>
    <!-- Products section -->
    <div class="products">
        <div class="container">
            <div class="form-group">
                <div class="col-md-12">
                    <button type="button" class="btn-add">Add</button>
                </div>
            </div>
            <div class="targets">
                ...
            </div>
        </div>
    </div>
    <!-- Resources section, slightly different markup -->
    <div class="resources">
        <div class="container">
            <br/>
            <div class="form-group">
                <button type="button" class="btn-add">Add</button>
            </div>
            <br/>
            <div class="targets">
                ...
            </div>
        </div>
    </div>
</form>

My jQuery looks like this:

$("form").on("click", "btn-add", function(e){
   var targets = $(this).parent().parent().next();
});

This solution works "somehow", but what if the markup changes?

Is there a way in jQuery to select the closest div with the class ".targets" on button click?

Thanks :)

$(this).closest('.containers').find('.targets')?

Tushar
– Tushar

2017-05-24 08:07:08 +00:00
Commented May 24, 2017 at 8:07 — Tushar
– Tushar, Commented May 24, 2017 at 8:07

Carsten Løvbo Andersen · Accepted Answer · 2017-05-24 08:09:06Z

Use (this).closest(".container").find(".targets");

this will select the closest element with the class container and search for an element in that with the class targets

$("form").on("click", ".btn-add", function(e){
   var targets = $(this).closest(".container").find(".targets");
   console.log($(targets).text().trim())
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <!-- Products section -->
    <div class="products">
        <div class="container">
            <div class="form-group">
                <div class="col-md-12">
                    <button type="button" class="btn-add">Add</button>
                </div>
            </div>
            <div class="targets">
                target1
            </div>
        </div>
    </div>
    <!-- Resources section, slightly different markup -->
    <div class="resources">
        <div class="container">
            <br/>
            <div class="form-group">
                <button type="button" class="btn-add">Add</button>
            </div>
            <br/>
            <div class="targets">
                target2
            </div>
        </div>
    </div>
</form>

Jamie Barker · Accepted Answer · 2017-05-24 08:08:13Z

0

If you know they will always be within the .products element, you could do:

$(this).closest('.products').find('.targets');

A helpful guide for jQuery traversing methods: http://api.jquery.com/category/traversing/

answered May 24, 2017 at 8:08

Jamie Barker

8,2663 gold badges31 silver badges64 bronze badges

3 Comments

Carsten Løvbo Andersen Over a year ago

Would this not only work for the first button? since the second button dont have a parent called products

Jamie Barker Over a year ago

It would, but the point is to find the closest element that will always be present, no matter what the mark-up will be changed to. I avoided using the .container because in my experience you find that with modern coding techniques, "containers" or "wrappers" aren't needed, and then you end up removing them ;)

Carsten Løvbo Andersen Over a year ago

If you look at his html, 1 button is inside "products", and one inside "resources". So if he use your code, nothing will happen when i clicks the second button

SilverSurfer · Accepted Answer · 2017-05-24 08:13:17Z

0

Try this:

$(this).closest('.container').find('.targets')

edited May 24, 2017 at 8:13

answered May 24, 2017 at 8:09

SilverSurfer

4,3647 gold badges27 silver badges56 bronze badges

1 Comment

SilverSurfer Over a year ago

I dont need copy :)

li0n_za · Accepted Answer · 2017-05-24 08:15:24Z

0

You could use closest() which searches for selector higher up in tree and find() which searches for selector going down the tree

$(this).closest('.container').find('.targets')

edited May 24, 2017 at 8:15

answered May 24, 2017 at 8:09

li0n_za

4552 silver badges15 bronze badges

Collectives™ on Stack Overflow

jQuery button click, get div with class

4 Answers 4

Comments

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related