1

i am trying to get li tag text value using js but i am not getting the expected output i.e ("Pens").

I have added a code snippet.

Note - I cannot change html.

console.log(jQuery('#accordionItem li span').html());
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="accordionItem" class="filter_middle-stage2-list_wrapper">
  <li style="font-weight: bold;">Pens<span>(1200)</span></li>
</div>

Any thoughts on this ?

vsync
  • 118,978
  • 58
  • 307
  • 400
  • Does this question solve your problem? [Using .text() to retrieve only text not nested in child tags](https://stackoverflow.com/questions/3442394/using-text-to-retrieve-only-text-not-nested-in-child-tags) – A_A Oct 17 '20 at 07:02
  • 1
    Yes it solves the issue. Thankyou –  Oct 17 '20 at 07:03
  • Glad it works now :) If you can mark it as a duplicate, please do that so people will find the question with all the good answers. If you can't I'll just flag it as a duplicate and a moderator will mark it – A_A Oct 17 '20 at 07:13
  • Hello, it still have issue, so can't mark as a duplicate. –  Oct 17 '20 at 07:29
  • Hello. Are you expecting a "Pens(1200)" or "Pens"? – Vương Hữu Thiện Oct 17 '20 at 11:00
  • Pens is what i am expecting. –  Oct 17 '20 at 11:03
  • Does this answer your question? [Using .text() to retrieve only text not nested in child tags](https://stackoverflow.com/questions/3442394/using-text-to-retrieve-only-text-not-nested-in-child-tags) – WOUNDEDStevenJones Oct 21 '20 at 16:25

4 Answers4

1

Use the text method like below:

console.log($('#accordionItem li span').text());
Gulmuhammad Akbari
  • 1,986
  • 2
  • 13
  • 28
0

You seem to be selecting the <span> tag on your jQuery selector. Although I'd suggest using the text method to achieve what you are looking for.

Lucas Terracino
  • 137
  • 7
0

from what I understand you want the text of the li without the text of the span. So you can use the replace function to do it like so:

console.log($('#accordionItem li').text().replace($('#accordionItem li span').text(), ''));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="accordionItem" class="filter_middle-stage2-list_wrapper">
  <li style="font-weight: bold;">Pens<span>(1200)</span></li>
</div>

if you want a more general solution that will get you just the text of the li without any of its children that would be a better solution:

console.log($('#accordionItem li').contents().get(0).nodeValue);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="accordionItem" class="filter_middle-stage2-list_wrapper">
  <li style="font-weight: bold;">Pens<span>(1200)</span></li>
</div>
Saar Davidson
  • 1,312
  • 1
  • 7
  • 16
0

No jQuery needed. Since you have an element with ID, you can access it directly, and get the node's text and simply remove any non-digit characters, and you'll be left with the numeral value you are after.

The benefit of this method is the irrelevance of the DOM structure - it will always work for that element (with that ID), but can be applied to any <li> element, regardless if it has a <span> child (or any other children)

console.log( 
  accordionItem.children[0].firstChild.textContent
)
<div id="accordionItem" class="filter_middle-stage2-list_wrapper">
  <li style="font-weight: bold;">Pens<span>(1200)</span></li>
</div>
vsync
  • 118,978
  • 58
  • 307
  • 400