Adding class to next element using 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?

Use $('.radio').next('label').addClass('radio-url'); - I'm guessing you don't have the correct context of this, which is why your code doesn't work - fiddle — billyonecan
– billyonecan, Commented Oct 29, 2013 at 15:26

Satpal · Accepted Answer · 2013-10-29 15:32:07Z

3

You can use .siblings()

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

DEMO

Or

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

DEMO2

edited Oct 29, 2013 at 15:32

answered Oct 29, 2013 at 15:26

Satpal

134k13 gold badges168 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

gen_Eric Over a year ago

You probably want to use .next() because siblings() will target all the labels, not just the one.

LHH · Accepted Answer · 2013-10-29 15:28:12Z

1

You can use next() function

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

answered Oct 29, 2013 at 15:28

LHH

3,3231 gold badge24 silver badges29 bronze badges

Comments

j08691 · Accepted Answer · 2013-10-29 15:31:23Z

1

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)

edited Oct 29, 2013 at 15:31

answered Oct 29, 2013 at 15:26

j08691

209k33 gold badges269 silver badges281 bronze badges

Comments

LostInComputer · Accepted Answer · 2013-10-29 15:47:01Z

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:

To check the radio button by clicking the label!
If the input type is text, clicking the label focuses the text input
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/

Max Pro · Accepted Answer · 2013-10-29 15:31:11Z

0

DEMO

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

answered Oct 29, 2013 at 15:31

Max Pro

565 bronze badges

Comments

andres.chort · Accepted Answer · 2013-10-29 15:31:29Z

0

Use CSS element+element selector:

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

http://jsfiddle.net/ttnUU/

answered Oct 29, 2013 at 15:31

andres.chort

8367 silver badges10 bronze badges

Comments

owsata · Accepted Answer · 2013-10-29 15:32:03Z

0

Works optimal

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

http://jsfiddle.net/q76FJ/

answered Oct 29, 2013 at 15:32

owsata

1,2351 gold badge13 silver badges25 bronze badges

Comments

Dhaval Marthak · Accepted Answer · 2013-10-29 15:32:49Z

0

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

edited Oct 29, 2013 at 15:32

answered Oct 29, 2013 at 15:26

Dhaval Marthak

17.4k6 gold badges48 silver badges69 bronze badges

2 Comments

gen_Eric Over a year ago

The if statement is probably not needed here, nor is it even correct.

Dhaval Marthak Over a year ago

@RocketHazmat Yeah Thanks for pointing out! forgot to remove :)

billyonecan · Accepted Answer · 2013-10-29 15:38:52Z

0

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

answered Oct 29, 2013 at 15:38

billyonecan

20.3k9 gold badges45 silver badges66 bronze badges

Collectives™ on Stack Overflow

Adding class to next element using jquery

9 Answers 9

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related