如何遍历子属性并将其重命名为 Jquery？答案

【问题标题】：How to iterate through attributes of child and rename it Jquery?如何遍历子属性并将其重命名为 Jquery？
【发布时间】：2015-08-01 07:47:18
【问题描述】：

我有这个标记。我正在尝试编写 jquery 选择器来获取模板订单列表中名称具有 Works 字符串的所有元素。我的要求是我有多个有序列表。如果我要删除任何列表，我想重新排列名称属性中的索引。

<ol class="template"> 
    <li> 
        <span class="label" name="Works[0].Id"></span> 
    </li>
    <li>
        <input id="textBox" type="text" value="" name="Works[0].Body">
    </li>                     
    <li>
        <input type="checkbox" id="checkbox" value="" name="Works[0].IsCompleted">                         
        <input type="button" id="delete" value="Delete">                      
    </li>                 
</ol>

<ol class="template"> 
    <li> 
        <span class="label" name="Works[1].Id"></span> 
    </li>
    <li>
        <input id="textBox" type="text" value="" name="Works[1].Body">
    </li>                     
    <li>
        <input type="checkbox" id="checkbox" value="" name="Works[1].IsCompleted">                         
        <input type="button" id="delete" value="Delete">                      
    </li>                 
</ol>

<ol class="template"> 
    <li> 
        <span class="label" name="Works[2].Id"></span> 
    </li>
    <li>
        <input id="textBox" type="text" value="" name="Works[2].Body">
    </li>                     
    <li>
        <input type="checkbox" id="checkbox" value="" name="Works[2].IsCompleted">                         
        <input type="button" id="delete" value="Delete">                      
    </li>                 
</ol>

我的方法是在我删除任何订单列表之后，即点击删除按钮之后。我将获取每个有序列表，并通过迭代将 0 的索引更改为列表的长度。但是我没有得到适当的选择器来捕获有序列表中的元素，其名称属性的值以 Works 开头。请推荐一些更好的选择器。

【问题讨论】：

JavaScript 尝试在哪里？

标签： javascript jquery jquery-selectors

【解决方案1】：

你想要的选择器是：

$("ol.template [name^=Works]")

这是 jQuery Attribute Starts With 选择器。

顺便说一句，name 不是<span> 元素的有效属性。它只能用于以下元素：

<button>, <form>, <fieldset>, <iframe>, <input>, <keygen>, <object>, <output>, <select>, <textarea>, <map>, <meta>, <param>

见https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes

【讨论】：

谢谢！！我们可以为每个模板获取这个吗？即我想遍历每个模板。
您可以在任何时候使用它来查找具有相同开头属性的所有元素。
你是说 $(this).find("[name^=Works]") 吗？
是的，它适用于查找当前元素下的所有模板元素。

【解决方案2】：

这是与主流浏览器一起使用的纯 javascript

var ol = document.getElementsByTagName('ol');
var temp = ol.getElementsByClassName('template');
for(var i=0;i<temp.length;i++){
if(temp[i].name.indexOf('Works')==0){ // if name attribute start with 'Work'
//if(temp[i].name.indexOf('Works') > -1){    => if name attribute contains 'Work'
//if(temp[i].name.indexOf('Works') == -1){  => if name attribute is not contains 'Work'
//if(temp[i].name.indexOf('Works') == temp[i].name.length - 'Works'.length - 1){  => if name attribute is ended with 'Work'
// now play with with temp[i]
temp[i].style.background = 'yellow';
}
}

【讨论】：