Как заменить часть значения атрибутов для набора элементов в jQuery?

Question

Я пытаюсь заменить ряд атрибутов «для» меток на основе их текущего содержимого.

Приложение использует AJAX для добавления товара в счет-фактуру без обновления страницы. Получив уведомление об успешном добавлении элемента, мой скрипт должен заменить все метки в форме, чей атрибут «для» заканчивается на «-new» с тем же атрибутом минус «-ново» и добавлением («-» + itemValue) где itemValue - это идентификатор элемента добавленного счета.

Я знаю, как выбрать все метки, которые я хочу сразу изменить:

jQuery('label[for$=new]') 

Я знаю, как получить их «за» атрибута:

jQuery('label[for$=new]').attr('for') 

Я попробовал JavaScript метод замены :

jQuery('label[for$=new]').attr('for').replace(/-new/,itemValue) 

Но, кажется, для выбора атрибута «для» каждой метки, замените текст и передайте r заменяемый текст назад (ни к чему), так как я не знаю, как идентифицировать метки, у которых есть атрибут «для», который я хочу заменить.

Вот некоторые примеры HTML:

<form id="InvoiceItemsForm-1" action="<?=$_SERVER['PHP_SELF'];?>" method="post" name="InvoiceItemsForm-1" onsubmit="return false"> 
<div id="InvoiceItem-new-1" class="InvoiceItem"> 
<label for="InvoiceItemNumber-new">New Invoice Item Number: </label> 
<input id="InvoiceItemNumber-new" class="InvoiceItemNumber" type="text" value="" name="InvoiceItemNumber-new"> 
<label for="InvoiceItemDescription-new">Item Description: </label> 
<input id="InvoiceItemDescription-new" class="InvoiceItemDescription" type="text" value="" name="InvoiceItemDescription-new"> 
<label for="InvoiceItemAmount-new">Item Amount: </label> 
<input id="InvoiceItemAmount-new" class="InvoiceItemAmount" type="text" value="" name="InvoiceItemAmount-new"> 
<input id="addInvoiceItem-1" width="25" type="image" height="25" src="/payapp/images/greenplus.th.png" alt="Add New Invoice Item" onclick="addInvoiceItemButtonPushed(this)" value="invoiceItem"> 
</div> 
<button id="CloseInvoice-1" onclick="closeInvoice(this)" type="button">Close Invoice</button> 
</form> 

После того, как я получить эту работу, я собираюсь заменить все идентификаторы для всех входов. Та же проблема. Я предполагаю, что решение выглядит примерно так:

jQuery('input[id$=new]').attr('id').replace(/-new/,itemValue) 

Я просто не могу понять синтаксис этого.

Answer 1

Нет необходимости использовать .each() ... метод .attr() принимает функцию в качестве второго параметра, который возвращает новое значение, которое будет использоваться в качестве замены

jQuery('label[for$=new]').attr('for', function(index, currentValue){ 
    return currentValue.replace(/-new/,'-' + itemValue); 
}); 

Answer 2

Не уверен, что я получаю вопрос, но что-то вроде:

var oldFor = $('label[for$=new]').attr('for'); 
var newFor = oldfor.replace(/-new/,itemValue); 

$('label[for$=new]').attr('for', newFor); 

.attr (ATTRIBUTENAME, значение)

attributeName = The name of the attribute to set. 
value = A value to set for the attribute. 

При выборе нескольких элементов, вам нужно будет перебирать :

$('label[for$=new]').each(function(index) { 
    $(this).attr('for', $(this).attr('for').replace(/-new/, '-' + itemValue)); 
}); 

Answer 3

Если возможно, почему бы просто не поместить тег input внутри тега label? Таким образом, вам не понадобится атрибут for внутри тега label.

Далее, лучший способ выполнить то, что вы пытаетесь сделать, - использовать идентификационный номер счета-фактуры в качестве идентификатора для окружающего div и добавить новый класс для «новых» счетов-фактур.

Так что ваша форма будет выглядеть примерно так:

<form id="InvoiceItemsForm-1" action="<?=$_SERVER['PHP_SELF']" method="post" name="InvoiceItemsForm-1" onsubmit="return false"> 
    <div class="InvoiceItem new"> 
     <label>New Invoice Item Number: <input class="InvoiceItemNumber" type="text" value="" name="InvoiceItemNumber"></label> 
     <label>Item Description: <input class="InvoiceItemDescription" type="text" value="" name="InvoiceItemDescription-new"></label> 
     <label for="InvoiceItemAmount-new">Item Amount: <input class="InvoiceItemAmount" type="text" value="" name="InvoiceItemAmount-new"></label> 
     <input id="addInvoiceItem-1" width="25" type="image" height="25" src="/payapp/images/greenplus.th.png" alt="Add New Invoice Item" onclick="addInvoiceItemButtonPushed(this)" value="invoiceItem"> 
    </div> 
    <button id="CloseInvoice-1" onclick="closeInvoice(this)" type="button">Close Invoice</button> 
</form> 

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