javascript - JQuery:如何找到位于当前元素之后的元素

Question

假设，我们有 2 个复选框和复选框后面的 2 个 div:

<div class="wrapper">
    <input type="checkbox" name="checkbox1" checked="" />
</div>
<div class="border"></div>

<div class="wrapper">
    <input type="checkbox" name="checkbox2" checked="" />
</div>
<div class="border"></div>

我的目标是切换位于复选框下方的适当“边框”div 的颜色。问题是，我不知道如何获得合适的 div。我试过这个，但它不起作用:

$('input[type="checkbox"]').change(
    function  ()
    {
        var div = $(this).find('div');//<-- ?

        if ($(this).checked)
        {
            div.css("border", "solid 2px blue");
        }
        else
        {
            div.css("border", "solid 2px black");
        }
    });

jsfiddle

Answer 1

问题在于 .find() 方法将选择任何后代元素。

由于 input 元素是自封闭的并且不包含任何后代元素，因此 $(this).find('div') 没有选择任何内容。

您可以选择父 div 元素，然后选择紧随其后的元素:

$(this).parent().next();

以上将选择直接父元素。使用 .closest() 方法选择祖先 .wrapper 元素可能更安全(以防嵌套变化):

$(this).closest('.wrapper').next();

此外，jQuery 对象没有 checked 属性，您应该检索 DOM 元素的 checked 属性，因此 $(this)。 checked 应该是 this.checked 或者您可以简单地使用 .prop() 方法从 DOM 中检索 checked 属性通过使用 jQuery 对象中的元素:$(this).prop('checked').

Updated Example

$('input[type="checkbox"]').on('change', function() {
  var div = $(this).closest('.wrapper').next();

  if (this.checked) {
    div.css("border", "solid 2px blue");
  } else {
    div.css("border", "solid 2px black");
  }
});

---

作为旁注，我建议简单地切换相应元素上的类:

Updated Example

.border.blue-border {
  border-color: blue;
}

$('input[type="checkbox"]').on('change', function() {
  $(this).closest('.wrapper').next().toggleClass('blue-border')
});