如何获得标签后的文字

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属性来获取文本。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

您可以进一步改进代码

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

var arr = [];

$('.loc').each(function(){
   arr.push($(this).html().split('<br>')[1]);
});
console.log(arr);

您可以使用html（），拆分它，并使用数组中的第二个值。

var arr = [];

$('.loc').each(function(){
   arr.push($(this).html().split('<br>')[1]);
});
console.log(arr);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/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 3

var arr = [];

    $('.loc').each(function(){
        arr.push($(this).children('br').get(0).nextSibling);
    });
console.log(arr);