我有一个ul > li
列表,每个选定li
它得到一个类=ms-selected
上li
点击。
假设我从这里的列表中单击了“帮助”和“请”(添加了类:''ms-selected''):
<ul id="cultsSelect">
<li class="ms-selected">help</li>
<li>me</li>
<li class="ms-selected">please</li>
</ul>
现在我想使用 JavaScript 将此选定值添加到新列表中。
<ul id="newList">
<li></li>
<li></li>
</ul>
预期输出:
<ul id="newList">
<li>help</li>
<li>please</li>
</ul>
我确实尝试了一下,至少只是希望将值发送到控制台,但是因为我不工作的解决方案是基于 ul 的点击事件,所以它在每个点击事件上都进行了重复。
JS - 这是我最近一次尝试复制值,因为在每个点击事件中,“ms-selected”类已经添加到前一个值,然后再次添加。
$(function(){
var selection = [];
var count;
$(document).on('click',"#cultsSelect", function() {
var cults = document.getElementsByClassName("ms-selected");
for(count = 0; count < cults.length; count++){
if(cults.length > count){
selection[count] = cults[count].innerText;
}
console.log(selection[count]);
}
})
});
这只会记录到控制台,但我现在想,如果我能让这个工作添加到“li”中,那将不难。我仍然希望得到最终答案,而不仅仅是对 console.log 的修复。谢谢。
要实现这一点,您可以简单地将 clicked li
in附加#cultsSelect
到 中#newList
,如下所示:
$('#cultsSelect li').click(function() {
$(this).appendTo('#newList');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="cultsSelect">
<li>help</li>
<li>me</li>
<li>please</li>
</ul>
New:<br />
<ul id="newList"></ul>
如果您也想保留原始列表项,clone()
请在追加之前添加一个调用:
$('#cultsSelect li').click(function() {
$(this).clone().appendTo('#newList');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="cultsSelect">
<li>help</li>
<li>me</li>
<li>please</li>
</ul>
New:<br />
<ul id="newList"></ul>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句