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>');
        });
})
});

这是生成的第二个无序列表（“#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>

我知道这一定是比较简单的事情，但我很茫然。我怎样才能做到这一点？谢谢！

Answer 1

我相信有人会使用 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/

Answer 2

您需要更改此行：

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

至：

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

对于每个跨度只获取文本和return一个数组（参考。.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>

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

JavaScript to join text with a delimiter from each line in an unordered list and append to another ul

javascript

jquery

html-lists