JavaScript 将文本与无序列表中每一行的分隔符连接起来并附加到另一个 ul

如何解决JavaScript 将文本与无序列表中每一行的分隔符连接起来并附加到另一个 ul

我需要从无序列表中的命名跨度中提取的文本加入并附加到另一个 ul。我的代码将连接所有单词，但我无法确定如何使用“|”连接每一行中的单词分隔该行中的每个单词。

例如，这是我原来的无序列表：

<ul id="addTERM-viewable">
<li id="NEWterm-0"><span class="termTXT" name="combine" id="term-0">word one</span><span class="altermTXT" name="combine" id="term-0-alt-0">123</span><span class="altermTXT" name="combine" id="term-0-alt-1">456</span></li>
<li id="NEWterm-1"><span class="termTXT" name="combine" id="term-1">word two</span><span class="altermTXT" name="combine" id="term-1-alt-1">678</span></li>
<li id="NEWterm-2"><span class="termTXT" name="combine" id="term-2">word three</span><span class="altermTXT" name="combine" id="term-2-alt-1">900</span><span class="altermTXT" name="combine" id="term-2-alt-2">321</span></li>
</ul>

这是我的 javascript：

$(document).ready(function () {
    $('#movetoPointsTips').on("click",function() {   
    
   var textArray =  $("ul#addTERM-viewable li").each(function(i,el){
               $(el).attr('id','NEWterm-' + ($(el).index()));
        }); 

        var vals = textArray.map(function () {
            var value =  $(this).find('span[name="combine"]').text();
            return value;
            value.forEach(function(words){
            words.join('|');
            });
        }).get();

        vals.forEach(function(t){
        $('#patterns').append('<li>' + t + '</li>');
        });
})
});

这是生成的第二个无序列表（“#patterns”）：

<ul id="patterns">
<li>word one123456</li>
<li>word two678</li>
<li>word three900321</li>
</ul>

然而，我正在寻找的是：

<ul id="patterns">
<li>word one|123|456</li>
<li>word two|678</li>
<li>word three|900|321</li>
</ul>

我知道这一定是相对简单的事情，但我不知所措。我怎样才能做到这一点？谢谢！

解决方法

我敢肯定有人会改用 map 的方法，但这里有几个快速循环来执行您想要的操作：

$('#moveToPointsTips').on("click",function() {
  //array for new list items
  var items = [];
  $('#addTERM-viewable li').each(function() {
    //for each list item,we'll create a new array to hold all span texts
    var thisItem = [];
    $(this).find("span").each(function() {
      thisItem.push($(this).text());
    });
    //join the span texts with your delimiter
    items.push(thisItem.join('|'));
  });
    
  //our new unordered list
  var newList = $('<ul>');
  $.each(items,function(k,v) {
    //for each of the previous items,whose spans' content we joined,add them to the new unordered list
    newList.append($('<li>').append(v));
  });
  //just so we can verify it looks like we want
  console.log(newList[0].outerHTML);
  
});

https://jsfiddle.net/3ysoqh1u/

,

您需要更改此行：

 var value =  $(this).find('span[name="combine"]').text();

到：

var value =  $(this).find('span[name="combine"]').map((idx,ele) => ele.textContent).get().join('|');

对于每个跨度只获取文本并返回一个数组（参考。.map()），加入结果数组

片段：

$('#moveToPointsTips').on("click",function() {
    var textArray =  $("ul#addTERM-viewable li").each(function(i,el){
        $(el).attr('id','NEWterm-' + ($(el).index()));
    });
    var vals = textArray.map(function () {
        var value =  $(this).find('span[name="combine"]').map((idx,ele) => ele.textContent).get().join('|');
        return value;
    }).get();

    vals.forEach(function(t){
        $('#patterns').append('<li>' + t + '</li>');
    });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<button id="moveToPointsTips">moveToPointsTips</button>
<ul id="addTERM-viewable">
    <li id="NEWterm-0"><span class="termTXT" name="combine" id="term-0">word one</span><span class="altermTXT" name="combine" id="term-0-alt-0">123</span><span class="altermTXT" name="combine" id="term-0-alt-1">456</span></li>
    <li id="NEWterm-1"><span class="termTXT" name="combine" id="term-1">word two</span><span class="altermTXT" name="combine" id="term-1-alt-1">678</span></li>
    <li id="NEWterm-2"><span class="termTXT" name="combine" id="term-2">word three</span><span class="altermTXT" name="combine" id="term-2-alt-1">900</span><span class="altermTXT" name="combine" id="term-2-alt-2">321</span></li>
</ul>

<ul id="patterns">
</ul>