jQuery - перебирайте пары метка / вход и добавляйте уникальный идентификатор

Question

У меня есть следующий код, размещенный несколько раз на странице, некоторые в таблице, а некоторые во всплывающей подсказке:

<p class="radioBtn">
    <label for="business"></label>
    <input id="business" type="radio" name="radioBtn" value="" />
</p>
<p class="radioBtn">    
    <label for="private"></label>
    <input id="private" type="radio" name="radioBtn" value="" />
</p>

Я хотел бы знать, как с помощью jQuery я могу перебрать всю страницу и добавить уникальный идентификационный номер в конец атрибута метки «for», а также ввести «id», чтобы я мог получить что-нибудь уникальный для каждой пары, как это:

<p class="radioBtn">
    <label for="business0"></label>
    <input id="business0" type="radio" name="radioBtn" value="" />
</p>
<p class="radioBtn">    
    <label for="private0"></label>
    <input id="private0" type="radio" name="radioBtn" value="" />
</p>

Большое спасибо заранее.

Answer 1

Поздний ответ, но, используя jQuery, я, вероятно, сделал бы это примерно так:

$("input:radio[name=radioBtn]").attr('id',function(index,id){
    $(this).prev()[0].htmlFor += index;
    return id += index;
});

Меньше кода и, вероятно, лучшая производительность.

Для объяснения .attr() может принять функцию для значения, которое вы устанавливаете.Его возвращаемое значение будет новым значением атрибута.

В функции первый параметр - это индекс текущего элемента в итерации, второй параметр - текущее значение устанавливаемого атрибута (id в данном случае).

Таким образом, тело функции выглядит следующим образом:

• $(this).prev() Получите предыдущий элемент, используя jQuery's .prev().
• [0] Извлечь элемент DOM из объекта jQuery. (<label>)
• Установите для свойства htmlFor метки значение += текущего индекса.
• Возвращение текущего идентификатора += текущего индекса.

Answer 2

Попробуйте

$(function(){
    $("input:radio[name='radioBtn']").each(function(index){
        var currElem = $(this);
        var prevLabel = currElem.prev();
        currElem.attr("id", this.id + index);

        prevLabel.attr("for", prevLabel.attr("for") + index);
    });    
});

См. рабочая демонстрация

Answer 3

Примерно так:

$('label').each(function(index) {
    var forAttr = $(this).attr('for');
    $next = $(this).next();
    if($next.attr('id') == forAttr) {
        $(this).attr('for', forAttr + index);
        $next.attr('id', forAttr + index);
    }
});

Хотя было бы лучше сделать это на стороне сервера.