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 example （我在那里输入了一个文本输入，因此您可以看到它仅适用于无线电输入）

Answer 3

您可以使用next（）函数

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

Answer 4

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

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

点击标签检查单选按钮！
如果输入类型为文本，则单击标签会聚焦文本输入
出于无障碍原因

<强> 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')

Fiddle Example

Example 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

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

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

..这会将课程radio-url添加到label课程input之后的所有radio元素

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

9 个答案: