jQuery выбирает div из набора (группы) класса

Question

Мое намерение состоит в том, чтобы выбрать все 2-й элемент из класса. Исчезните в этом div и потушите все 1-й элемент этого класса.

Пример как ниже. Когда пользователь нажимает кнопку "Далее", выберите все 2-й набор слайд-бокса из modalDialog и постепенно уменьшите или уменьшите их соответственно. JQuery, который я написал, выбирает список на основе общего количества классов.slide-box. Так что только 2-й.Slide-Box исчезает или исчезает. Заранее спасибо. 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 1

Вы должны быть в состоянии использовать nth-child() или же nth-of-type() Селекторы в jQuery для нацеливания на определенные элементы с заданным интервалом, особенно если вы планируете внести несколько изменений в ваш HTML.

Не стоит вкладывать свои элементы

Поскольку вы хотите иметь возможность эффективно нацеливать каждый из блоков по отдельности, вероятно, было бы лучше не вкладывать их. Попробуйте обновить существующие диалоги следующим образом:

<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>

Пусть ваш счетчик и JQuery работают на вас

Воспользовавшись предыдущим изменением и nth-child() Селектор, теперь вы можете легко переключаться между скрытием всех четных и нечетных элементов, передавая 2n а также 2n+1 к nth-child() селектор соответственно.

Это позволит вам изменить свой код как таковой:

// 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();
}

Собираем все вместе

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>

Вы также можете увидеть обновленную версию вашего оригинального примера здесь.