jQuery 从一组 class 中选择 div

Question

我的意图是 select 来自 class 的所有第二个元素。淡入 div 并淡出 class.

的所有第一个元素

如下示例。当用户单击下一步时，select 来自 modalDialog 的所有第二组滑动框并相应地淡入或淡出。 jQuery 我根据 .slide-box 的总数 class 编写了 select 列表。所以只有第二个 .slide-box 淡入或淡出。提前致谢。代码笔：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() or 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();
}

综合考虑

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>

你也可以see an updated version of your original example here.

jQuery 从一组 class 中选择 div

jQuery selecting div from a set(group) of class

html

javascript

jquery

traversal