Question

我的目的是从一个类中选择所有第二个元素。淡入该div并淡出该类的所有第一个元素。

如下例子。当用户单击下一步时，从modalDialog中选择所有第二组幻灯片，并相应地淡入或淡出它们。我写的jQuery根据.slide-box类的总数选择列表。所以只有第二个.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

您应该能够使用jQuery中的nth-child()或nth-of-type()选择器以给定的时间间隔定位特定元素，特别是如果您考虑对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();
}

全部放在一起

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

您也可以see an updated version of your original example here。

jQuery从一组（组）类中选择div

1 个答案: