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

這樣，您就不必在closest您的通話each不再任

 $(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 s，並從每個人中使用.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>