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

Question

I am having html like this:

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

Now I need to apply a class to each label immediate after each <input type="radio"> .

I am using jquery like this:

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

I am trying to add class 'radio-url' to each <label> immediately after radio tag. What mistake have I did in this?

Answer 1

You can use .siblings()

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

DEMO

Or

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

DEMO2

Answer 2

Try:

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

jsFiddle example (I threw a text input in there so you can see that it works on only radio inputs)

Answer 3

您可以使用next（）函数

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

Answer 4

This answer doesn't directly answer your question!

I believe that your label should have the for attribute so that the label is associated with the radio button. This allows the user:

1. To check the radio button by clicking the label!
2. If the input type is text, clicking the label focuses the text input
3. For accessibility reasons

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

Search the label using the radio element's ID.

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

Fiddle: http://jsfiddle.net/78zAB/

Answer 5

You need to loop through all radio buttons:

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

Or

$("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

Use CSS element+element selector:

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

http://jsfiddle.net/ttnUU/

Answer 8

Works optimal

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

http://jsfiddle.net/q76FJ/

Answer 9

Posting this as an answer as all of the others are using the incorrect selector, or don't specify the label in next() :

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

.. which will add the class radio-url to all label elements which come immediately after an input with the class radio