从儿童

Question

我想从已知父div的多个不同子节点获取所有文本，以便结果为： “文字1＆amp;文字2 ”

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

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

$(".bigdiv").text()只能生成文本1文本2，我需要用空格或＆amp;分隔文本。等等。

Answer 1

您可以使用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>

Answer 2

＆＃13;

＆＃13;

function getTexts() {
var rtn="";
$("#texts").children().each(function() {
      rtn+=$(this).text();
      rtn+=" & ";
});
return rtn.substring(0, rtn.length-3);
}
console.log(getTexts());

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

另一种可能的选择，但它不适用于文本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

Answer 4

你可以通过以下方式遍历bigdiv的所有孩子：

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

  }

在该函数内部，您仍然可以使用.text（）从子元素中获取文本。

如果您想要如何灵活地使用这些值，最好将每个子元素的文本存储在数组中。

如果您只是希望通过子值之间的分隔符以正确的方式输出它，您可以执行以下操作：

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()
  }
});

我提出example here。