Question 172787 in Javascript Question posted in
A very good W3school tutorial can be found here.

Can Javascript select a sibling of b tags just under them?

Using I Cheerio I want to select the text of theses parts:

this is the first area to select

this is the second area to select

<div class="lun boxBd boxMain" t="page">
  <div id="boxWrd" class="boxLtr">
    <div>
      <h1>trust</h1><i class="aud"><span class="ico icoAu"></span></i>
    </div>
    <div>
      <div id="pho">/ˈtrəst/<i class="aud" onclick="tts(&quot;trust&quot;, &quot;us&quot;)"><span class="ico icoAuUs"></span></i><i id="phSep"></i>/trʌst/<i class="aud" onclick="tts(&quot;trust&quot;, &quot;uk&quot;)"><span class="ico icoAuUk"></span></i></div>
    </div>
  </div>
  <hr>

  <b>meaning</b>:
  this is the first area to select

  <hr>

  <b>other meanings</b>:
  this is the second area to select


  <div id="meanTools"><i class="ico icoSt" onclick="starWm()"></i><i class="ico icoCo" onclick="copyWm()"></i>
    <cgr id="msgTools"></cgr>
  </div>
</div>

Selecting the b tags is easey:

$('.boxMain b').toArray().map(item => $(item).text());

But How can we select under them and get the desired text?

Tags:

2

Answers


  1. 0

    .nextSibling

    console.log(document.querySelector("b").nextSibling.textContent);
    <h1>test</h1>
<p>this is a test</p>
<b>bold</b>
text here
<span>span element</span>
    Login or Signup to reply.
  2. 0

    This is a bit complicated, especially compared to the other answer here, but it works. The explanation is in the comments

    //Get the HTML of the parent element as a string, then parse it with jQuery to get selectable elements
var parentHtmlCopy = $($('.boxMain b').parent().html())

//Now we have a list of all the child elements
//we filter the list down to only keep the ones we want
//undefined tags are just text nodes, and we don't want ones that are just line breaks or whitespace
var textNodes = parentHtmlCopy
  .toArray()
  .filter((el) => {
    //console.log(el.tagName, el.textContent)
    return el.tagName === undefined && el.textContent.trim() !== '';
  });

//Only keep the actual text content in our array instead of the text node object
var justText = textNodes.map((el) => {
    //console.log(el.textContent)
    return el.textContent.replace(':', '').trim();
  });
  
 console.log(justText)
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="lun boxBd boxMain" t="page">
  <div id="boxWrd" class="boxLtr">
    <div>
      <h1>trust</h1><i class="aud"><span class="ico icoAu"></span></i>
    </div>
    <div>
      <div id="pho">/ˈtrəst/<i class="aud" onclick="tts(&quot;trust&quot;, &quot;us&quot;)"><span class="ico icoAuUs"></span></i><i id="phSep"></i>/trʌst/<i class="aud" onclick="tts(&quot;trust&quot;, &quot;uk&quot;)"><span class="ico icoAuUk"></span></i></div>
    </div>
  </div>
  <hr>

  <b>meaning</b>:
  this is the first area to select

  <hr>

  <b>other meanings</b>:
  this is the second area to select


  <div id="meanTools"><i class="ico icoSt" onclick="starWm()"></i><i class="ico icoCo" onclick="copyWm()"></i>
    <cgr id="msgTools"></cgr>
  </div>
</div>

    Greatly simplified version thanks to the above answer from Ronnie Royston. This is probably a much better way to go!

    $('.boxMain b').each((i, el)=>{
  var key = el.textContent.trim();
  var val = el.nextSibling.textContent.replace(':','').trim()
  console.log(key, ' -- ', val)
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="lun boxBd boxMain" t="page">
  <div id="boxWrd" class="boxLtr">
    <div>
      <h1>trust</h1><i class="aud"><span class="ico icoAu"></span></i>
    </div>
    <div>
      <div id="pho">/ˈtrəst/<i class="aud" onclick="tts(&quot;trust&quot;, &quot;us&quot;)"><span class="ico icoAuUs"></span></i><i id="phSep"></i>/trʌst/<i class="aud" onclick="tts(&quot;trust&quot;, &quot;uk&quot;)"><span class="ico icoAuUk"></span></i></div>
    </div>
  </div>
  <hr>

  <b>meaning</b>:
  this is the first area to select

  <hr>

  <b>other meanings</b>:
  this is the second area to select


  <div id="meanTools"><i class="ico icoSt" onclick="starWm()"></i><i class="ico icoCo" onclick="copyWm()"></i>
    <cgr id="msgTools"></cgr>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search