how to get all the text after <br/> tag

my html is like this

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

expected output: ["From Shimla","from kashmir","From bihar"];

i'm trying something like this

var arr = [];

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

<script src=".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>

how to get all the text after <br/> tag

my html is like this

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

expected output: ["From Shimla","from kashmir","From bihar"];

i'm trying something like this

var arr = [];

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

<script src="https://ajax.googleapis./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>

• javascript
• jquery

Share Improve this question Follow edited Nov 29, 2016 at 11:05 Ben Fortune 32.2k1010 gold badges8181 silver badges8181 bronze badges asked Nov 29, 2016 at 11:02 Dilip GDilip G 52922 gold badges77 silver badges1717 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

You can target the br element and use .get(index) to fetch the underlying DOM element, the use nextSibling to target the text node. Then nodeValue property can be used to get the text.

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

<script src="https://ajax.googleapis./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>

You can further improve you code as

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

<script src="https://ajax.googleapis./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').each(function(){
        arr.push($(this).children('br').get(0).nextSibling);
    });
console.log(arr);

var arr = [];

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

You can use html(), split it, and use second value from array.

var arr = [];

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

<script src="https://ajax.googleapis./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>