javascript - 如何获取<br>标签后的文字

Question

如何获得所有的text在 <br/> 之后tag

我的html是这样的

<i class="loc">cherry<br>From Shimla</i>
<i class="loc">Apple<br>from kashmir</i>
<i class="loc">banana<br>From bihar</i>

预期输出:["From Shimla","from kashmir","From bihar"];

我正在尝试这样的事情

var arr = [];

$('.loc').each(function(){
   arr.push($(this).text());
});
console.log(arr);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<i class="loc">cherry<br>From Shimla</i>
<i class="loc">Apple<br>from kashmir</i>
<i class="loc">banana<br>From bihar</i>

Answer 1

您可以定位 br 元素并使用 .get(index) 获取底层 DOM 元素，使用 nextSibling以文本节点为目标。那么nodeValue属性可用于获取文本。

var arr = [];
$('.loc').each(function() {
  arr.push($(this).find('br').get(0).nextSibling.nodeValue);
});
console.log(arr);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<i class="loc">cherry<br>From Shimla</i>
<i class="loc">Apple<br>from kashmir</i>
<i class="loc">banana<br>From bihar</i>

你可以进一步改进你的代码

var arr = $('.loc').map(function() {
  return $(this).find('br').get(0).nextSibling.nodeValue;
}).get();
console.log(arr);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<i class="loc">cherry<br>From Shimla</i>
<i class="loc">Apple<br>from kashmir</i>
<i class="loc">banana<br>From bihar</i>