从 div 标签获取具有 div 视觉的文本节点

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|Two|Three|Four" 像这样....使用“|”除法

请帮帮我......

Answer 1

使用.join() after jQuery.map()

The join() method joins all elements of an array into a string.

jQuery.map() translate all items in an array or object to new array of items.

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>

从 div 标签获取具有 div 视觉的文本节点

get textNode with division from div tag

javascript

jquery

division

textnode