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

Question

我有这样的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');
}

我试图在单选标记后立即向每个<label>添加类'radio-url'。 我在这方面犯了什么错误？

Answer 1

您可以使用.siblings（）

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

DEMO

要么

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

DEMO2

Answer 2

尝试：

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

jsFiddle示例 （我在其中输入了文本输入，因此您可以看到它仅适用于单选输入）

Answer 3

您可以使用next（）函数

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

Answer 4

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

我认为您的标签应具有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>

JQuery的

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

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

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

Answer 5

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

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

要么

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

小提琴的例子

例子2

Answer 6

DEMO

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

Answer 7

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

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

http://jsfiddle.net/ttnUU/

Answer 8

效果最佳

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

http://jsfiddle.net/q76FJ/

Answer 9

将其作为答案发布，因为其他所有其他人都使用了错误的选择器，或者没有在next()指定label ：

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

..会将radio-url类添加到在input radio类之后立即出现的所有label元素中