получить TextNode с делением от сНа тега

Question

<div class="list" data-id="1">One</div> 
<div class="list" data-id="2">Two</div> 
<div class="list" data-id="3">Three</div> 
<div class="list" data-id="4">Four</div> 

---

var text = $(".list").contents().filter(function() { 
return this.nodeType == 3; }).text() 
alert(text); 

Теперь, я получаю предупреждение "OneTwoThreeFour"

Но я хочу, чтобы получить "One | Два | Три | Четыре", как это .. ..using "|" Разделение

Пожалуйста, помогите мне .......

Answer 1

Использование .join() после jQuery.map()

Метод join() объединяет все элементы массива в строку.

jQuery.map() перевод всех элементов в массиве или объекте в новый массив элементов.

var text = $(".list").map(function() { 
 
    return this.textContent; 
 
}).get(); 
 

 
alert(text.join('|'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div class="list" data-id="1">One</div> 
 
<div class="list" data-id="2">Two</div> 
 
<div class="list" data-id="3">Three</div> 
 
<div class="list" data-id="4">Four</div>

Или используя свой подход

var text = $(".list").contents().filter(function() { 
 
    return this.nodeType == 3; 
 
}).get(); 
 
text = text.map(function(t) { //.map as text is a collection of `TextNode` objects 
 
    return t.textContent; 
 
}); 
 
alert(text.join('|'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div class="list" data-id="1">One</div> 
 
<div class="list" data-id="2">Two</div> 
 
<div class="list" data-id="3">Three</div> 
 
<div class="list" data-id="4">Four</div>