Reza San Reza San - 2 months ago 11
HTML Question

jQuery selecting div from a set(group) of class

My intention is to select all 2nd element from a class. Fade in that div and fadeout all 1st element of that class.

An example like below. When user click next, select all 2nd set of slide-box from modalDialog and fade them in or out accordingly. The jQuery I wrote select the list based on total number of .slide-box class. So only 2nd .slide-box fades in or out. Thanks in advance. Codepen: http://codepen.io/rezasan/pen/LROyqX

HTML:

<a href=""#">NEXT</a>
<ul class="modalBox">

<li class="modalDialog">
<div class="slide-box">
<img src="http://placehold.it/300x200" />
<p>IMAGE SET 1</p>
<div class="slide-box">
<img src="http://placehold.it/300/300" />
<p>IMAGE SET 1</p>
</div>
</div>
</li>

<li class="modalDialog">
<div class="slide-box">
<img src="http://placehold.it/300x200" />
<p>IMAGE SET 2</p>
<div class="slide-box">
<img src="http://placehold.it/300/300" />
<p>IMAGE SET 2</p>
</div>
</div>
</li>

<li class="modalDialog">
<div class="slide-box">
<img src="http://placehold.it/300x200" />
<p>IMAGE SET 3</p>
<div class="slide-box">
<img src="http://placehold.it/300/300" />
<p>IMAGE SET 3</p>
</div>
</div>
</li>

</ul>


jQuery:

var counter = 1;
//Hide all second element of slide-box
$(".modalDialog .slide-box:eq("+counter+")").hide();

//When user click, call rotateImage function
$('a').click(function(){
rotateImage();
});

//If counter = 1, fade in 2nd image of all sets and fade out 1st image.
function rotateImage(){
if(counter === 1){
$(".modalDialog .slide-box:eq("+counter+")").fadeIn();
}
}


CSS:

*{
margin:0;
padding:0;
text-align:center;
}

li{
margin:20px 0px;
display:inline-block;
vertical-align:text-top;
}

Answer

You should be able to use the nth-child() or nth-of-type() selectors within jQuery to target specific elements at a given interval, especially if you consider making a few modifications to your HTML.

Consider Not Nesting Your Elements

Since you want to be able to effectively target each of the boxes individually, it would probably be best not to nest them. Try updating your existing dialogs as follows :

<li class="modalDialog">
    <div class="slide-box">
      <img src="http://placehold.it/300x200" />
      <p>IMAGE SET 1</p>
    </div>                                        
    <div class="slide-box">
        <img src="http://placehold.it/300/300" />
        <p>IMAGE SET 1</p>
    </div>
</li>

Let Your Counter and jQuery Work For You

By taking advantage of the previous change and the nth-child() selector, you can now easily toggle between hiding every even and odd elements by passing 2n and 2n+1 to the nth-child() selector respectively.

This will allow you change your code as such :

// Initially hide every 2nd element
$(".modalDialog .slide-box:nth-child(2n)").hide();

$('a').click(function(e){
    e.preventDefault();
    // Update your counter and handle rolling over (toggle between 0 and 1)
    counter = ++counter % 2;
    rotateImage();
});

function rotateImage(){
  // Initally hide all of your boxes
  $('.modalDialog .slide-box').hide();
  // Only show even / odd based on the counter
  $(".modalDialog .slide-box:nth-child(2n +"+counter+")").fadeIn();
}

Putting It All Together

enter image description here

var counter = 1;
//Hide all second element of slide-box
$(".modalDialog .slide-box:nth-child(2n)").hide();

//When user click, call rotateImage function
$('a').click(function(e){
  e.preventDefault();
  counter = ++counter % 2;
  rotateImage();
});

//If counter = 1, fade in 2nd image of all sets and fade out 1st image.
function rotateImage(){
  $('.modalDialog .slide-box').hide();
  $(".modalDialog .slide-box:nth-child(2n +"+counter+")").fadeIn();
}
        *{
          margin:0;
          padding:0;
          text-align:center;
        }

        li{
          margin:20px 0px;
          display:inline-block;
          vertical-align:text-top;
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<a href=""#">NEXT</a>
<ul class="modalBox">
  
  <li class="modalDialog">
    <div class="slide-box">
      <img src="http://placehold.it/300x200" />
      <p>IMAGE SET 1</p>
    </div>                                        
    <div class="slide-box">
        <img src="http://placehold.it/300/300" />
        <p>IMAGE SET 1</p>
    </div>
  </li>
  
 <li class="modalDialog">
    <div class="slide-box">
      <img src="http://placehold.it/300x200" />
      <p>IMAGE SET 2</p>
    </div>                                        
    <div class="slide-box">
        <img src="http://placehold.it/300/300" />
        <p>IMAGE SET 2</p>
    </div>
  </li>

   <li class="modalDialog">
    <div class="slide-box">
      <img src="http://placehold.it/300x200" />
      <p>IMAGE SET 3</p>
    </div>                                        
    <div class="slide-box">
        <img src="http://placehold.it/300/300" />
        <p>IMAGE SET 3</p>
    </div>
  </li>

</ul>

You can also see an updated version of your original example here.