Question

我有一个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.Thanks的修复。

Answer 1

要实现此目的，您只需将li中点击的#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>

Answer 2

纯粹的js方法;请查看是否有帮助

   var cults = document.getElementsByClassName("ms-selected"); 

   for(i=o;i<cults.length;i++) {
    var node = document.createElement('li');
     node.appendChild(document.createTextNode(cults[i].innerHTML))       
     document.getElementById("newList").appendChild(node);   
    }

Answer 3

这是一种简单的方法

$("#newList").html($("#cultsSelect").html())

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

使用JavaScript将HTML li文本添加到新的li列表

3 个答案: