jQuery的。如何在以下元素层次结构中获取父元素的文本？

Question

给定以下元素层次结构：

使用jQuery，如何从ID为 up_tag_div 的父div元素中抓取 abc 文字？

如果我简单地使用$('#up_tag_div').text()，结果文本为 abcdef 。不是我想要的。

Answer 1

你可以这样做

$("#up_tag_div").clone().children()
    .remove().end().text();

Answer 2

如果文本内容始终位于任何子项之前，则可以执行以下操作：

$('#up_tag_div').contents()[0].textContent

console.log($('#up_tag_div').contents()[0].textContent);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="up_tag_div">
  "abc"
  <div>def</div>
  <div>
    <br>
  </div>
</div>

如果文本不必然先于任何子女：

$('#up_tag_div')
  .contents()
  .filter(function() {
    return !this.tagName  //skip elements
  })
  .text()  
  .trim()                  

console.log($('#up_tag_div').contents().filter(function() {return !this.tagName}).text().trim());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="up_tag_div">
  <div>def</div>
  "abc"
  <div>
    <br>
  </div>
</div>