*更新*
一位意见提供者指出，他对我提供的代码没有得到相同的结果。
我做了一些进一步的观察并注意到我将代码块置于注册所选子类型的事件触发器中。
从事件触发器中删除后，一切都很好。
原帖
我知道这很容易，但我是新手程序员。
我想遍历div #genres_select中的任何内容，并将id（index）和value（text）分配给输入类型=“hidden”以提交给PHP。
.each的输出应构造HTML以使用相关数据创建这些隐藏的输入类型。
HTML：
<div id="genres_select">
<span class="1 sub_genre">Experimental rock</span>
<span class="5 sub_genre">Funk</span>
<span class="8 sub_genre">Hardcore hip hop</span>
</div>
<div id="button">Done</div>
JQuery的：
$('#button').click(function(){
$('#genres_select span.sub_genre').each(function(index){
console.log(index + ":" + $(this).text());
});
});
JQuery我遍及整个事物的次数与div＃genres_select的子项一样多次，产生重复。
0:Experimental rock
1:Funk
2:Hardcore hip hop
0:Experimental rock
1:Funk
2:Hardcore hip hop
0:Experimental rock
1:Funk
2:Hardcore hip hop
如何在不创建副本的情况下有效地执行此操作？
最终结果应如下所示：
<div id="genres_select">
<span class="1 sub_genre">Experimental rock</span>
<span class="5 sub_genre">Funk</span>
<span class="8 sub_genre">Hardcore hip hop</span>
</div>
<div id="button">Done</div>
<!-- hidden div -->
<div class="hide">
<input type="hidden" id="1" value="Experimental rock">
<input type="hidden" id="5" value="Funk">
<input type="hidden" id="8" value="Hardcore hip hop">
</div>
由于
答案 0 :(得分：0)
你真的不需要jQuery。试试这些简单但可靠的线路：
var os=document.getElementById('genres_select').getElementsByTagName('span');
for (var i=0;i<os.length;i++){
var o=os[i];
var names=o.className.split(' ');
var id=names[0];
var genre=o.innerHTML;
console.log(id, genre);
}
答案 1 :(得分：0)
我建议采用以下方法：
$('#button').click(function() {
// iterating through the span.sub_genre elements:
$('#genres_select span.sub_genre').each(function() {
// caching the current <span>:
var span = this,
// getting the text of the current <span>:
text = span.textContent;
// if there is no hidden input with a value equal to the
// text of the current span we create one, and append it to the
// '.hide' <div>
if ($('.hide input[value="' + text + '"]').length === 0) {
$('<input />', {
'type': 'hidden',
'value': span.textContent,
// a naive means of retrieving the number from the 'class' attribute:
'id': span.className.match(/^\d+/)
}).appendTo('.hide');
}
});
});/* this is entirely irrelevant */
#button {
border-radius: 0.5em;
border: 1px solid #000;
padding: 0.2em 0.5em;
height: 1.5em;
display: inline-block;
box-sizing: border-box;
cursor: pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="genres_select">
<span class="1 sub_genre">Experimental rock</span>
<span class="5 sub_genre">Funk</span>
<span class="8 sub_genre">Hardcore hip hop</span>
</div>
<div id="button">Done</div>
<div class="hide"></div>
虽然我会注意到在您发布的代码中没有重复内容可以准确反映您遇到的问题。
在纯JavaScript中，只使用DOM，您可以使用：
function catalog () {
// creating an <input /> element:
var input = document.createElement('input'),
// creating a reference to the element to which
// the <input /> elements should be added:
target = document.querySelector('.hide'),
// a variable to use within the loop:
clone;
// setting the type of the <input />:
input.type = 'hidden';
// using Array.prototype.forEach to iterate over the elements found
// by document.querySelectorAll(), using Function.prototype.call() to
// apply the Array method to the array-like NodeList returned by
// document.querySelectorAll():
Array.prototype.forEach.call(document.querySelectorAll('#genres_select span.sub_genre'), function(span) {
// 'span' is a reference to the current <span> over which
// we're iterating.
// if the target node has no <input /> element with a value equal
// to the current text:
if (target.querySelector('input[value="' + span.textContent + '"]') === null) {
// we clone the created <input />
clone = input.cloneNode();
// set its value to the text of the current <span>:
clone.value = span.textContent;
// set its id attribute (as above):
clone.id = span.className.match(/^\d+/);
// append the cloned <input /> to the target node:
target.appendChild(clone);
}
});
}
// set an event-listener to the '#button' <div> to execute the
// catalog() function in response to the click event:
document.getElementById('button').addEventListener('click', catalog);/* this is entirely irrelevant */
#button {
border-radius: 0.5em;
border: 1px solid #000;
padding: 0.2em 0.5em;
height: 1.5em;
display: inline-block;
box-sizing: border-box;
cursor: pointer;
}<div id="genres_select">
<span class="1 sub_genre">Experimental rock</span>
<span class="5 sub_genre">Funk</span>
<span class="8 sub_genre">Hardcore hip hop</span>
</div>
<div id="button">Done</div>
<div class="hide"></div>
参考文献：