Question

我完全迷失了这个！令人沮丧，我需要您的帮助

我希望获取显示在具有相同类别的div中 h2 id =“ coucou10” 之后的文本

例如

代码：

<div class="sameclass">blablabla</div>

<div class="sameclass"> 
  <h2 id="coucou10">Coucou</h2>
  blablabla 2 html to <br> 
  select this is the text I want<br>
  blabla bla bla bal balbal blabla
</div>

<div class="sameclass">
  <h2 id="coucou20">Coucou</h2>
  blablabla
</div>

我想要的结果：

blablabla 2 html to <br> 
select this is the text I want<br>
blabla bla bla bal balbal blabla

先谢谢大家

Answer 1

这是一个可能的解决方案。内容已过滤TEXT_NODE。您没有得到<br>元素。

console.log("Text of element with id(coucou10): " + $('div.sameclass #coucou10').contents().filter(function() {
  return this.nodeType == Node.TEXT_NODE;}).text()
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sameclass">blablabla</div>

<div class="sameclass"> 
  <h2 id="coucou10">Coucou</h2>
  blablabla 2 html to <br> 
  select this is the text I want<br>
  blabla bla bla bal balbal blabla
</div>

<div class="sameclass">
  <h2 id="coucou20">Coucou</h2>
  okeydokey
</div>

Answer 2

javascript解决方案...

        var allItems = document.getElementsByClassName('sameclass');
        for(var i=0; i < allItems.length; i++){
            for(var k=0; k < allItems[i].children.length; k++){
                if (allItems[i].children[k].localName == 'h2'){
                    var resettingZero = i + 1;
                    console.log("'sameclass' occurance# "+resettingZero+", we got h2 with the value:" + allItems[i].children[k].innerHTML);
                }
            }

        }

    <div class="sameclass">blablabla</div>

    <div class="sameclass"> 
    <h2 id="coucou10">Coucou</h2>
    blablabla 2 html to <br> 
    select this is the text I want<br>
    blabla bla bla bal balbal blabla
    </div>

    <div class="sameclass">
    <h2 id="coucou20">Coucou</h2>
    blablabla
    </div>

Answer 3

您可以使用下面提到的代码段获取上面的输出。如果您有很多具有类'.sameclass>＃coucou10'的元素，则可以利用它来执行循环并执行所需的值

document.querySelectorAll('.sameclass > #coucou10')[0].parentElement.childNodes.forEach(function(e){if(e.nodeType === 3 && e.textContent.trim().length != 0)console.log(e.textContent.trim())})

<div class="sameclass">blablabla</div>

<div class="sameclass"> 
  <h2 id="coucou10">Coucou</h2>
  blablabla 2 html to <br> 
  select this is the text I want<br>
  blabla bla bla bal balbal blabla
</div>

<div class=">sameclass<">
  <h2 id="coucou20">Coucou</h2>
  blablabla
</div>

Answer 4

一些香草JS：

// grab the element with the coucou10 id
const p = document.getElementById('coucou10');

// find its parent node, and then all the childNodes
// make sure they're iterable
const txt = [...p.parentNode.childNodes]

      // filter out elements that aren't text nodes
      .filter(node => node.nodeName === '#text')

      // grab the text content from those nodes
      .map(node => node.textContent.trim())

      // filter out the empty strings
      .filter(txt => txt !== '')

      // join the array of strings
      // (i've used a line break here but remove/add a space instead
      // according to your needs)
      .join('\n');
      
console.log(txt);

<div class="sameclass">blablabla</div>

<div class="sameclass"> 
  <h2 id="coucou10">Coucou</h2>
  <p>d</p>
  blablabla 2 html to <br> 
  select this is the text I want<br>
  blabla bla bla bal balbal blabla
</div>

<div class="sameclass">
  <h2 id="coucou20">Coucou</h2>
  blablabla
</div>

获取与标签内的文字匹配的文本

4 个答案: