用于儿童的jQuery选择器

Question

如果您单击以下示例中的任何标题，每个孩子都将获得不同的背景。不幸的是，这不是我想要的。

我想要这样的东西:如果我单击一个父对象，它会改变每个直接的颜色(！)孩子，而不是它里面的其他组的孩子的背景。

我目前正在尝试找出它的正确选择器，但我不明白。

你有什么想法吗？提前谢谢你！

​

$(document).ready(function() {

    $('.checkbox-parent').on('click', function() {
        var $group = $(this).closest('.checkbox-group');
        var $childs = $group.find('.checkbox-child');

        var checked = this.checked;

        $childs.each(function() {
            $(this).closest('.form-check').css('background-color', checked ? '#ABC' : 'red');
        });
    });

});

.form-check {
  margin-left: 15px;
}

.checkbox-group {
  background-color: #ABC;
  border: 2px solid black;
}

.checkbox-group .checkbox-group {
  margin-left: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="checkbox-group">
    <input type="checkbox" class="checkbox-parent" id="parent-1" checked="">
    <label for="parent-1"><strong>1 - The parent</strong></label>

    <div class="form-check">
        <input type="checkbox" class="checkbox-child" id="child-1-1" checked=""/>
        <label for="child-1-1">1 - This is an example text.</label>
    </div>
    <div class="form-check">
        <input type="checkbox" class="checkbox-child" id="child-1-2" checked="">
        <label for="child-1-2">1 - This is an example text.</label>
    </div>

    <div class="checkbox-group">
        <input type="checkbox" class="checkbox-parent" id="parent-2" checked="">
        <label for="parent-2"><strong>2 - The parent</strong></label>

        <div class="form-check">
            <input type="checkbox" class="checkbox-child" id="child-2-1" checked="">
            <label for="child-2-1">2 - This is an example text.</label>
        </div>
        <div class="form-check">
            <input type="checkbox" class="checkbox-child" id="child-2-2" checked="">
            <label for="child-2-2">2 - This is an example text.</label>
        </div>

        <div class="checkbox-group">
            <input type="checkbox" class="checkbox-parent" id="parent-3" checked="">
            <label for="parent-3"><strong>3 - The parent</strong></label>

            <div class="form-check">
                <input type="checkbox" class="checkbox-child" id="child-3-1" checked="">
                <label for="child-3-1">3 - This is an example text.</label>
            </div>
            <div class="form-check">
                <input type="checkbox" class="checkbox-child" id="child-3-2" checked="">
                <label for="child-3-2">3 - This is an example text.</label>
            </div>
        </div>
    </div>
</div>

​

Answer 1

我只是把你的选择器从

$group.find('.checkbox-child')

至

$group.find('> .form-check')

这样，您就不再需要在each中调用closest了

​

$(document).ready(function() {

    $('.checkbox-parent').on('click', function() {
        var $group = $(this).closest('.checkbox-group');
        var $childs = $group.find('> .form-check');

        var checked = this.checked;

        $childs.each(function() {
            $(this).css('background-color', checked ? '#ABC' : 'red');
        });
    });

});

.form-check {
  margin-left: 15px;
}

.checkbox-group {
  background-color: #ABC;
  border: 2px solid black;
}

.checkbox-group .checkbox-group {
  margin-left: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="checkbox-group">
    <input type="checkbox" class="checkbox-parent" id="parent-1" checked="">
    <label for="parent-1"><strong>1 - The parent</strong></label>

    <div class="form-check">
        <input type="checkbox" class="checkbox-child" id="child-1-1" checked=""/>
        <label for="child-1-1">1 - This is an example text.</label>
    </div>
    <div class="form-check">
        <input type="checkbox" class="checkbox-child" id="child-1-2" checked="">
        <label for="child-1-2">1 - This is an example text.</label>
    </div>

    <div class="checkbox-group">
        <input type="checkbox" class="checkbox-parent" id="parent-2" checked="">
        <label for="parent-2"><strong>2 - The parent</strong></label>

        <div class="form-check">
            <input type="checkbox" class="checkbox-child" id="child-2-1" checked="">
            <label for="child-2-1">2 - This is an example text.</label>
        </div>
        <div class="form-check">
            <input type="checkbox" class="checkbox-child" id="child-2-2" checked="">
            <label for="child-2-2">2 - This is an example text.</label>
        </div>

        <div class="checkbox-group">
            <input type="checkbox" class="checkbox-parent" id="parent-3" checked="">
            <label for="parent-3"><strong>3 - The parent</strong></label>

            <div class="form-check">
                <input type="checkbox" class="checkbox-child" id="child-3-1" checked="">
                <label for="child-3-1">3 - This is an example text.</label>
            </div>
            <div class="form-check">
                <input type="checkbox" class="checkbox-child" id="child-3-2" checked="">
                <label for="child-3-2">3 - This is an example text.</label>
            </div>
        </div>
    </div>
</div>

​

Answer 2

由于子节点是父节点的兄弟节点的子节点，因此在父节点上使用.siblings来访问.form-check，然后使用.find来访问子节点：

​

$(document).ready(function() {

  $('.checkbox-parent').on('click', function() {
    const $childs = $(this).siblings('.form-check').find('.checkbox-child');

    var checked = this.checked;

    $childs.each(function() {
      $(this).closest('.form-check').css('background-color', checked ? '#ABC' : 'red');
    });
  });

});

.form-check {
  margin-left: 15px;
}

.checkbox-group {
  background-color: #ABC;
  border: 2px solid black;
}

.checkbox-group .checkbox-group {
  margin-left: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="checkbox-group">
  <input type="checkbox" class="checkbox-parent" id="parent-1" checked="">
  <label for="parent-1"><strong>1 - The parent</strong></label>

  <div class="form-check">
    <input type="checkbox" class="checkbox-child" id="child-1-1" checked="" />
    <label for="child-1-1">1 - This is an example text.</label>
  </div>
  <div class="form-check">
    <input type="checkbox" class="checkbox-child" id="child-1-2" checked="">
    <label for="child-1-2">1 - This is an example text.</label>
  </div>

  <div class="checkbox-group">
    <input type="checkbox" class="checkbox-parent" id="parent-2" checked="">
    <label for="parent-2"><strong>2 - The parent</strong></label>

    <div class="form-check">
      <input type="checkbox" class="checkbox-child" id="child-2-1" checked="">
      <label for="child-2-1">2 - This is an example text.</label>
    </div>
    <div class="form-check">
      <input type="checkbox" class="checkbox-child" id="child-2-2" checked="">
      <label for="child-2-2">2 - This is an example text.</label>
    </div>

    <div class="checkbox-group">
      <input type="checkbox" class="checkbox-parent" id="parent-3" checked="">
      <label for="parent-3"><strong>3 - The parent</strong></label>

      <div class="form-check">
        <input type="checkbox" class="checkbox-child" id="child-3-1" checked="">
        <label for="child-3-1">3 - This is an example text.</label>
      </div>
      <div class="form-check">
        <input type="checkbox" class="checkbox-child" id="child-3-2" checked="">
        <label for="child-3-2">3 - This is an example text.</label>
      </div>
    </div>
  </div>
</div>

​