Javascript JQuery：如何查找位于当前元素之后的元素

假设在复选框后面有2个复选框和2个div：

我的目标是切换复选框下方相应“border”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");
        }
    });

$（'input[type=“checkbox”]）。更改(
函数（）
{
var div=$（this.find（'div'）；//将其更改为
var div=$（this.parent（））。下一步（'.border'）；
问题是
.find（）
方法将选择任何子体元素

由于
input
元素是自关闭的，并且不包含任何子元素，因此使用
$（this.find（'div'）
不会选择任何内容

您可以选择父
div
元素，然后选择紧跟其后的元素：

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

上面将选择直接的父元素。使用
.closest（）
方法选择祖先
.wrapper
元素可能更安全（以防嵌套变化）：

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



作为补充说明，我建议只需在相应的元素上切换一个类：


您需要使用
parent（）.next（）
，正如一些答案中提到的那样

此外，未正确评估复选框状态

尝试以下解决方案：

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

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

This
var div=$（This）.closest（'.wrapper'）.next（）；
我认为会更可靠
$(this).closest('.wrapper').next();

$('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");
  }
});

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

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

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

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