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

Question

我需要从无序列表中的命名跨度中拉出的文本被连接并附加到另一个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>');
        });
})
});

下面是生成的第二个无序列表(“#pattern”)：

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

我知道这一定是相对简单的事情，但我感到困惑。我如何才能做到这一点？谢谢!

Answer 1

您需要更改此行：

 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>

​

Answer 2

我肯定有人会有一个使用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/