使用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元素中