使用 jquery 将类添加到下一个元素

Adding class to next element using jquery

本文关键字：下一个 元素 添加 jquery 使用      更新时间：2023-09-26

我有这样的html：

<form>
    <div class="row">
        <input type="radio" class="radio">
        <label>Text</label>
        <input type="radio" class="radio">
        <label>Type</label>
    </div>
</form>

现在我需要在每个<input type="radio">之后立即对每个标签应用一个类。

我像这样使用jquery：

if($('input').hasClass('radio')){
    $(this).next().addClass('radio-url');
}

我正在尝试在无线电标记之后立即将类"radio-url"添加到每个<label>。我在这方面犯了什么错误？

你可以使用 .siblings（）

$('input[type="radio"]').siblings('label').addClass('radio-url');

演示

或

$('input[type="radio"]').next('label').addClass('radio-url');

演示2

你可以使用 next（） 函数

 $("input:radio").next('label').addClass("radio-url");`

尝试：

$(':radio').next().addClass('radio-url');

jsFiddle示例（我在那里扔了一个文本输入，所以你可以看到它只适用于无线电输入）

这个答案不直接回答你的问题！

我相信您的标签应该具有 for 属性，以便标签与单选按钮相关联。这允许用户：

  1. 通过单击标签来检查单选按钮！
  2. 如果输入类型为文本，则单击标签会使文本输入集中
  3. 出于可访问性原因

.HTML 

<div class="row">
    <input type="radio" class="radio" id="text"></input>
    <label for="text">Text</label>
    <input type="radio" class="radio" id="type"></input>
    <label for="type">Type</label>
</div>

杰奎里

使用单选元素的 ID 搜索标签。

$('input[type="radio"]').each(function(){
    var radioId = $(this).attr("id");
    $("label[for='" + radioId + "']").addClass('radio-url');
});

小提琴：http://jsfiddle.net/78zAB/

演示

$('input.radio').each(function () {
    $(this).next().addClass('radio-url');
})

使用 CSS 元素+元素选择器：

$('input:radio + label').addClass('theClass')

http://jsfiddle.net/ttnUU/

工作最佳

$('input[type=radio]').next('label').addClass('radio-url');

http://jsfiddle.net/q76FJ/

您需要遍历所有单选按钮：

$('input[type="radio"]').each(function(){
    $(this).next().addClass('radio-url');
});

或

$("input[type='radio'] + label").addClass('radio-url')

小提琴示例

例 2

将其发布为答案，因为所有其他选择器都使用不正确的选择器，或者没有在next()中指定label： 

$('input.radio').next('label').addClass('radio-url');

.. 这将类radio-url添加到所有label元素中，这些元素紧跟在与类radio input之后

相关文章：