CODEWITHSUNDEEP
javascriptjquery
CristianC
CristianC

Reputation: 301

Get texts from children

I would like to get all the text from multiple diverse children of a known parent div so that the result is: "Text 1 & Text 2"

<div class='bigdiv'>
<div><p>Text 1</p></div>

<div> <div>Text 2</div></div>
</div>

$(".bigdiv").text() would only produce Text 1Text 2 and I need to separate the texts with a space or & or etc.

Upvotes: 0

Views: 71

Answers (4)

shawn caza
shawn caza

Reputation: 374

You can loop through all the children of bigdiv with this:

$('.bigdiv').children().each(function() {

  }

inside of that function you can still use .text() to get the text from child element.

If you want to be really flexible about how you use the values it would be best to store the text of each child element in an array.

If you just want something simple to output it right way with a seperator between child values you can do something like this:

extracted_text = "";
seperator = " & ";

//loop throuh all children
$('.bigdiv').children().each(function() {

  //only add to string if a child element has text
  if($(this).text().length > 0){

  //add separation only if our extracted_text variable already has something in it
  if (extracted_text.length > 0){
    extracted_text += seperator;
  }
  //add text from current child element
  extracted_text += $(this).text()
  }
});

I put up an example here.

Upvotes: 0

Hastig Zusammenstellen
Hastig Zusammenstellen

Reputation: 4440

Another possible option but it won't work for text 4.

var yourString = '';
var counter = 0;
$('.bigdiv *').each(function() {
  if (!($(this).children().length > 0)) {
    counter++;
    addThis = $(this).text();
    if (counter === 1) {
      yourString = yourString + addThis;
    } else {
      yourString = yourString + ' & ' + addThis;
    }
    $('.showstring').text(yourString);
  }
})
.showstring {
  background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='bigdiv'>
  <div>
    <p>Text 1</p>
  </div>
  <div>
    <div>Text 2</div>
  </div>
  <div>
    Text 3
  </div>
  <div>
    Text 4
    <span>Text 5</span>
  </div>
</div>
<div class="showstring"></div>

fiddle with it

Upvotes: 0

MBJH
MBJH

Reputation: 1639

function getTexts() {
var rtn="";
$("#texts").children().each(function() {
      rtn+=$(this).text();
      rtn+=" & ";
});
return rtn.substring(0, rtn.length-3);
}
console.log(getTexts());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="texts">
<p>Text #1</p>
<p>Text #2</p>
<p>Text #3</p>
<p>Text #4</p>
</div>

Upvotes: 0

trincot
trincot

Reputation: 349946

You could use a DOM Tree Walker:

function getTexts(element) {
    const nodes = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null, null),
        texts = [];
    for (let node; node = nodes.nextNode();) {
        texts.push(node.nodeValue.trim()); 
    }
    return texts.filter(Boolean); // Only keep non-empty strings
}

const texts = getTexts($(".bigdiv").get(0)).join(" & ");

console.log(texts);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='bigdiv'>
    <div>
        <p>Text 1</p>
        <b>Hello 
             <i>there!</i>
        </b>
    </div>
    <div>
        <div>Text 2</div>
    </div>
</div>

Upvotes: 2

Related Questions