Question

当我使用$('.color-wrap div')时，选择两个颜色包装器的第一个div。

我需要先选择，但必须是一组，所以我不能使用
$('.colorbox:first-child')或$('.colorbox-hard:first-child')。

我想jQuery将它们视为一组6个div - 因为，我想从六个一组中选择一个随机div。

    <div class="wrapper">
        <div class="color-wrap">
            <div class="colorbox"></div>
            <div class="colorbox"></div>
            <div class="colorbox"></div>
        </div>
        <div class="color-wrap">
            <div class="colorbox-hard"></div>
            <div class="colorbox-hard"></div>
            <div class="colorbox-hard"></div>
        </div>
    </div>

如何选择仅使用类颜色换行的1 div div？

Answer 1

var divs = $('.color-wrap div');

for(var i = 0 ; i < divs.length; i++){
  console.log(divs[i]);
  // You can use like this.
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="color-wrap">
    <div class="colorbox"></div>
    <div class="colorbox"></div>
    <div class="colorbox"></div>
  </div>
  <div class="color-wrap">
    <div class="colorbox-hard"></div>
    <div class="colorbox-hard"></div>
    <div class="colorbox-hard"></div>
  </div>
</div>

您也可以像var divs = $('.color-wrap .colorbox, .color-wrap .colorbox-hard');

一样使用

Answer 2

如果我理解你，你可以做这样的事情。参考评论。

＆＃13;

$(document).ready(function() {
  // Collect all divs for both wrappers in variable
  var group = $('.color-wrap').find('div');
  // Store the amount of items in the group variable
  var groupCount = group.length;
  // Store random number between 0 and the amount of items minus 1
  var randomIndex = Math.floor(Math.random() * groupCount);
  // Use the random number as the key for the group variable to store one of the divs
  var randomElement = group[randomIndex];
  console.log(randomElement);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
    <div class="color-wrap">
        <div id="colorbox">One</div>
        <div id="colorbox">Two</div>
        <div id="colorbox">Three</div>
    </div>
    <div class="color-wrap">
        <div id="colorbox-hard">Four</div>
        <div id="colorbox-hard">Five</div>
        <div id="colorbox-hard">Six</div>
    </div>
</div>

＆＃13;

Answer 3

$('.color-wrap:first-child div:first-child')应该做你想要的。

包装器中元素的jQuery选择器

3 个答案: