jquery - 在 jQuery 中使用 this 来仅定位选择器的一个实例

Question

我正在尝试用 jQuery 做一些简单的事情来帮助我解决一个更大的问题 - 我有一系列复选框，每个复选框都在一个 div 内

当页面加载时，如果选中该复选框，我希望最接近的 div 改变颜色，但只有最接近的一个而不是其他的

<form>

    <div class="col-lg-6">

        <input type="checkbox" class="go" checked="checked"/>

    </div>

    <div class="col-lg-6">

        <input type="checkbox" class="go"/>

    </div>

</form>

jQuery:

if ($('.go').is(':checked')) {
    $(this).closest('.col-lg-6').css('background-color','red');
}

我无法更改选择器等，也无法更改 HTML 布局 - 为什么它不能识别 go 的实例并更改最近的 div？

上面它没有做任何事情 - 如果我将 jQuery 更改为:

if ($('.go').is(':checked')) {
    $('.go').closest('.col-lg-6').css('background-color','red');
}

然后它为我不想要的两个 div 着色

Answer 1

您需要使用each来确定哪个this将是彩色父级。

例如:

$('.go:checked').each(function(index, value){
	$(this).closest('.col-lg-6').css('background-color','red');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>

    <div class="col-lg-6">

        <input type="checkbox" class="go" checked="checked"/>

    </div>

    <div class="col-lg-6">

        <input type="checkbox" class="go"/>

    </div>

</form>

如果他们没有条件或任何其他执行代码，您可以直接通过以下方式执行此操作:

$('.go:checked').closest('.col-lg-6').css('background-color','red');