如何替换jQuery中一组元素的部分属性值？

Question

我正在尝试根据标签的当前内容替换一系列“for”属性。

应用程序正在使用 AJAX 将项目添加到发票而不刷新页面。在收到成功添加项目的通知后，我的脚本应替换表单中所有标签，其“for”属性以“-new”结尾，相同的属性减去“-new”并添加（“-”+ itemValue），其中 itemValue 是添加的发票项目的项目 ID。

我知道如何一次选择要更改的所有标签：

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

我知道如何获取他们的“for”属性：

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

我尝试了 JavaScript 替换方法：

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

但这似乎选择了每个标签的“for”属性，替换文本，并将替换的文本传回（什么都没有），因为我不知道如何识别具有我想要的“for”属性的标签替换。

这是一些示例 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>

一旦我让它工作，我将替换所有输入的所有 id。同样的问题。我想解决方案看起来像这样：

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

如果可以的话，为什么不把input 标签放在label 标签里面呢？这样，您就不需要在 label 标记内添加 for 属性。

接下来，完成您想要做的事情的更好方法是使用发票 ID 号作为周围 div 的 ID，并为“新”发票条目添加一个“新”类。

所以你的表单看起来像这样：

<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>

您仍然拥有获取新发票项目字段数据所需的所有可定位性，但现在，您只需要做两件事即可将“新”发票行转换为“现有”发票项目行：将id 属性添加到div 并删除new 类，jQuery 可以让您轻松完成这两项工作。

Answer 3

不确定我是否得到了这个问题，但类似于：

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

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

.attr(attributeName, value)

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));
});