How to target one of many repeating elements using jQuery traversal?

Question

I have a sequence of repeated results from handlebars templating, which results in:

<div class="checkboxes"><input type="checkbox" class="Btn1"></div>
<div class="checkboxes"><input type="checkbox" class="Btn2"></div>
...more checkboxes
<div class="div1" style="display:none;">...lots of divs...</div>
<div class="div2" style="display:none;">...lots of divs...</div>
<div class="div3" style="display:none;">...lots of divs...</div>
...more divs

<div class="checkboxes"><input type="checkbox" class="Btn1"></div>
<div class="checkboxes"><input type="checkbox" class="Btn2"></div>
...more checkboxes
<div class="div1" style="display:none;">...lots of divs...</div>
<div class="div2" style="display:none;">...lots of divs...</div>
<div class="div3" style="display:none;">...lots of divs...</div>
...more divs

...

Currently have this jQuery, but it opens ALL of the div1s, or div2s, etc..

$(document).on("change",".Btn1",function () {
    var $that = $(".div1");
    $that.slideToggle();
    $("#Btn2").removeClass("active");
    $("#Btn3").removeClass("active");
    $(".div1").not($that).slideUp();
    $(".div2").not($that).slideUp();
    $(".div3").not($that).slideUp();
});

Tried a few variations of var $that = $(this).next(".div1"); Any suggestions?

NOTE: an id needs to be unique so #Btn1 will always be referred to the first element even though you clicked on the second button with the same id. — VVV, May 05 '14 at 00:49
@vyx.ca changed the buttons to classes.. alternatively, would you recommend templating in the _id of each MongoDoc to append to the id of the btns and divs? If so, how would I then reference this uniqueness with the jQuery? — StackThis, May 05 '14 at 02:14

score 1 · Answer 1 · edited May 23 '17 at 12:28

1

Try

var $that = $(this).next(".div1");

Since you have many Btn1, the line $("#Btn1").next(".div1") will match the first Btn1 and get the next div1. By using $(this) instead, you only target the button that was clicked and get the next div1.

EDIT: As others have pointed out, each element should have a unique ID. It would be better to use a class on the button and target the class rather than the ID. See this for more info on jquery and multiple ID's - https://stackoverflow.com/a/8498617/853295

edited May 23 '17 at 12:28

Community

1
1

answered May 05 '14 at 00:47

garethb

3,951
6
32
52

had tried this too.. have added classes to the checkboxes: `$(document).on("change",".Btn1",function () {`, but ALL of the .div1 elements still appear.. any other suggestions? thanks – StackThis May 05 '14 at 02:08
Try - $(this).parent().nextAll('.div1:first'); See fiddle http://jsfiddle.net/WWs5V/1/ (click a checkbox with class btn1) – garethb May 05 '14 at 04:39

score 0 · Answer 2 · answered May 05 '14 at 00:53

0

First, try to have just one element with an specific id.

Second, try:

var $that = $(this).nextAll('.div1:first')

answered May 05 '14 at 00:53

sites

21,417
17
87
146

would you recommend templating in the _id of each MongoDoc to append to the id of the btns and divs? If so, how would I then reference this uniqueness with the jQuery? – StackThis May 05 '14 at 02:12
hmmm that _id is complicated, you could stop using ids and use class instead, classes can be repeated – sites May 05 '14 at 05:08

How to target one of many repeating elements using jQuery traversal?

2 Answers2