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

我有一个ul > li列表,每个选定li它得到一个类=ms-selectedli点击。

假设我从这里的列表中单击了“帮助”和“请”(添加了类:''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 liin附加#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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

将新 <LI> 动态添加到不同列表时,如何使 HTML 列表保持原位

来自分类Dev

使用JavaScript将多个Li添加到Ul

来自分类Dev

Javascript使用数组将li添加到ul

来自分类Dev

使用JavaScript将多个Li添加到Ul

来自分类Dev

当使用jquery单击特定li时,如何将css类添加到列表中?

来自分类Dev

如何将项目添加到javascript数组并以html <li>显示该数组

来自分类Dev

使用javascript / jquery创建<li>元素并将其添加到有序列表

来自分类Dev

如何将新的li标签动态添加到无序列表

来自分类Dev

单击提交按钮时如何使用JavaScript将li元素添加到ul

来自分类Dev

使用JavaScript将CSS类添加到动态ul li标签

来自分类Dev

使用javascript将css类添加到ul中的所有li父元素

来自分类Dev

如何将多个跨度添加到 <li> javascript

来自分类Dev

使用jquery将li添加到现有ul

来自分类Dev

如何使用jQuery将“ <li>”添加到“ <ul>”?

来自分类Dev

使用jQuery将子li动态添加到ul

来自分类Dev

使用javascript将HTML实体添加到按钮文本

来自分类Dev

如何使用javascript将数据附加到ol li

来自分类Dev

LocalStorage并将li添加到列表

来自分类Dev

当单击 li 时,将隐藏类添加到所有 li 但不添加到单击的 li 并删除类(如果该类已使用 jquery 可用)

来自分类Dev

使用jQuery将dt / dd列表转换为li列表?

来自分类Dev

Vue-将类从迭代列表中的子组件添加到父LI?

来自分类Dev

Vuejs 将 css 类添加到数组中的 ul li 列表

来自分类Dev

如何在文本框更改时将ul li添加到div中以及如何使用jQuery从div中删除ul li

来自分类Dev

使用JavaScript将多个过滤器类别应用于<li>的列表

来自分类Dev

使用appendChild将li附加到ul

来自分类Dev

将UL添加到LI(不将LI添加到UL)

来自分类Dev

将UL添加到LI(不将LI添加到UL)

来自分类Dev

无法跳过使用not(first)将CSS规则添加到First li元素

来自分类Dev

如何使用jQuery将类添加到PHP生成的<li>中?

Related 相关文章

  1. 1

    将新 <LI> 动态添加到不同列表时,如何使 HTML 列表保持原位

  2. 2

    使用JavaScript将多个Li添加到Ul

  3. 3

    Javascript使用数组将li添加到ul

  4. 4

    使用JavaScript将多个Li添加到Ul

  5. 5

    当使用jquery单击特定li时,如何将css类添加到列表中?

  6. 6

    如何将项目添加到javascript数组并以html <li>显示该数组

  7. 7

    使用javascript / jquery创建<li>元素并将其添加到有序列表

  8. 8

    如何将新的li标签动态添加到无序列表

  9. 9

    单击提交按钮时如何使用JavaScript将li元素添加到ul

  10. 10

    使用JavaScript将CSS类添加到动态ul li标签

  11. 11

    使用javascript将css类添加到ul中的所有li父元素

  12. 12

    如何将多个跨度添加到 <li> javascript

  13. 13

    使用jquery将li添加到现有ul

  14. 14

    如何使用jQuery将“ <li>”添加到“ <ul>”?

  15. 15

    使用jQuery将子li动态添加到ul

  16. 16

    使用javascript将HTML实体添加到按钮文本

  17. 17

    如何使用javascript将数据附加到ol li

  18. 18

    LocalStorage并将li添加到列表

  19. 19

    当单击 li 时,将隐藏类添加到所有 li 但不添加到单击的 li 并删除类(如果该类已使用 jquery 可用)

  20. 20

    使用jQuery将dt / dd列表转换为li列表?

  21. 21

    Vue-将类从迭代列表中的子组件添加到父LI?

  22. 22

    Vuejs 将 css 类添加到数组中的 ul li 列表

  23. 23

    如何在文本框更改时将ul li添加到div中以及如何使用jQuery从div中删除ul li

  24. 24

    使用JavaScript将多个过滤器类别应用于<li>的列表

  25. 25

    使用appendChild将li附加到ul

  26. 26

    将UL添加到LI(不将LI添加到UL)

  27. 27

    将UL添加到LI(不将LI添加到UL)

  28. 28

    无法跳过使用not(first)将CSS规则添加到First li元素

  29. 29

    如何使用jQuery将类添加到PHP生成的<li>中?

热门标签

归档