CODEWITHSUNDEEP
jquery
Timmy Von Heiss
Timmy Von Heiss

Reputation: 2218

multiple selectors with the same classes how to setup click function?

see the following jsfiddle: https://jsfiddle.net/haq8jzg1/

I do not want every $('.blue') to toggle on click, instead, I only want the next $('.blue') to show. 

$('.red').on('click', function(){
    $('.red').closest('.blue').toggle();
});

<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>

<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>

<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>

<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>

I've tried to implement closest(), next() and nextAll() without success.

Upvotes: 2

Views: 249

Answers (4)

Rounin
Rounin

Reputation: 29463

You can chain next() twice:

$(this).next().next().toggle();

Working Example:

$(document).ready(function(){

$('.red').click(function(){$(this).next().next().toggle();});

});
div {
display: inline-block;
width: 40px;
height: 40px;
}

.red {
background: rgb(255,0,0);
}

.green {
background: rgb(0,127,0);
}

.blue {
background: rgb(0,0,255);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>

<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>

<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>

<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>

The Javascript equivalent of the jQuery:

var reds = document.querySelectorAll('.red');

function toggleNextBlue() {
this.nextSibling.nextSibling.classList.toggle('hidden');
}

for (var i = 0; i < reds.length; i++) {
    var red = reds[i];
    red.addEventListener('click',toggleNextBlue,false);
}
div {
display: inline-block;
width: 40px;
height: 40px;
}

.red {
background: rgb(255,0,0);
}

.green {
background: rgb(0,127,0);
}

.blue {
background: rgb(0,0,255);
}

.hidden {
display: none;
}
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>

<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>

<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>

<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>

Upvotes: 1

To Ka
To Ka

Reputation: 650

When you are inside the event handler, you should refer to this variable to access the dom element that triggered the event.

On the other hand, next() returns the sibling that comes right after the current one, so you should use nextAll('selector') to get all siblings matching the selector. In your case you only need the first match, so you should filter results with eq(0) to get the first matching element.

So finally your code should look like this:

$('.red').on('click', function(){ $(this).nextAll('.blue').eq(0).toggle(); });

Upvotes: 1

Alexander Nied
Alexander Nied

Reputation: 13623

$('.red').on('click', function(e){
  $(this).nextAll('.blue').first().toggle();
});

More robust solution-- will look past the clicked .red element and get all .blue elements-- then just pops off the first (nearest) element found and toggles it.

Upvotes: 4

j08691
j08691

Reputation: 207901

You can use .next() x2:

$('.red').on('click', function(){
  $(this).next().next('.blue').toggle();
});

jsFiddle example

$(this) refers to the element you clicked on, where $('.red') selects all the elements with the class red.

Upvotes: 1

Related Questions