Get specific tag values using jquery

I am trying to get “Pen” , “All Pen” values.

Here is what i tried :- Please take a look at the code & share your thoughts Please take a look at the code & share your thoughts

var filtered_category = jQuery('ul.pc_filter_middle-stage2-list ul li:first-child').contents().get(0).nodeValue;
    var parent_filtered_category = jQuery('ul.pc_filter_middle-stage2-list ul li:first-child').parents().find('#accordionItemhide li').contents().get(0).nodeValue; 
    
    console.log(filtered_category);
        console.log(parent_filtered_category);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ok_filter_middle-stage2-container active" style="display: block;">
    <ul class="ok_filter_middle-stage2-list-title"><li><strong>Category</strong></li></ul>

    <ul class="ok_filter_middle-stage2-list">

      <div id="accordionItemhide" class="ok_filter_middle-stage2-list_wrapper">
        <li style="font-weight: normal;">Pencil<span>(2200)</span><img src="/media/images/default/filter_arrow_down_white.svg" alt=""><arrow></arrow></li>

        <div class="ok_filter_middle-stage2-category-list sub-category1">
          <ul role="listbox" tabindex="0" aria-label="folder list">
              <li data-value="2" tabindex="-1" role="option" class="active" aria-selected="false">Pencils<span>(200)</span></li><li data-value="8" tabindex="-1" role="option" class="active">Pencils<span>(300)</span></li>                </ul>
        </div>
      </div>

      <div id="accordionItemhide" class="ok_filter_middle-stage2-list_wrapper">
        <li style="font-weight: normal;">Pen<span>(1200)</span></li>

        <div class="ok_filter_middle-stage2-category-list sub-category2">
          <ul role="listbox" tabindex="0" aria-label="folder list">
            <li data-value="All Pen" tabindex="-1" role="option" aria-selected="false">All Pen<span>(10000)</span></li>
      </div>

    </ul>
  </div>

Answer

Let’s first try to fix your HTML. Considering I don’t know what your program or site does I just refactor everything you had:

   $(document).ready(() => {
    const okFilter = $('.ok-filter');
    const bodyContent = okFilter.find('.ok-filter__ul--body');
    const secondCategory = bodyContent.find('.ok-filter_wrapper--category:nth-child(2)');
    const secondCategoryListElements = secondCategory.find('.ok-filter__li');
    
    const values = secondCategoryListElements.get().map((li) => li.childNodes[0].nodeValue, []);
    
    console.log(values);
   });

.ok-filter--active {
  display: block;
}
.ok-filter__li--title {
  font-weight: bold;
}
.ok-filter__li--item {
  font-weight: normal;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ok-filter ok-filter--active">

  <ul class="ok-filter__ul ok-filter__ul--header">
    <li class="ok-filter__li ok-filter__li--title">Category</li>
  </ul>
  
  <ul class="ok-filter__ul ok-filter__ul--body">
  
    <div class="ok-filter__wrapper ok-filter_wrapper--category">
      <li class="ok-filter__li ok-filter__li--item">Clothing<span>(2200)</span><img src="/media/images/default/filter_arrow_down_white.svg" alt=""><arrow></arrow></li>
      
       <div class="ok-filter__wrapper ok-filter__wrapper--sub-category">
        <ul class="ok-filter__ul" role="listbox" tabindex="0" aria-label="folder list">
          <li class="ok-filter__li ok-filter__li--active" data-value="2" tabindex="-1" role="option" aria-selected="false">Bodysuit<span>(200)</span></li>
          <li class="ok-filter__li ok-filter__li--active" data-value="8" tabindex="-1" role="option">Graphic Tees<span>(300)</span></li>
        </ul>
      </div>
    </div>
    
    <div class="ok-filter__wrapper ok-filter_wrapper--category">
      <li class="ok-filter__li ok-filter__li--item">Shoes<span>(1200)</span></li>

      <div class="ok-filter__wrapper ok-filter__wrapper--sub-category">
        <ul  class="ok-filter__ul" role="listbox" tabindex="0" aria-label="folder list">
          <li class="ok-filter__li" data-value="All Shoes" tabindex="-1" role="option" aria-selected="false">All Shoes<span>(10000)</span></li>
        </ul>
      </div>
    </div>
    
  </ul>
  
</div>

In the script section, you have an example of how you can get the requested values. I separated them using the find() function to give you more control & understanding of how to reach them. I have to be honest with you. If you aren’t planning to support IE then using jquery only slows you down. You could have used querySelector() & querySelectorAll() instead.

Secondly, try to get data from text nodes is a really bad practice. If you want a value that is altered for the user you could have used an attribute to store that data in the given element or using the <data> element from HTML5. You could also just have wrapped it into a <span> tag to make sure you selected the correct element.

Good luck