Parents traversing

by Venkatesh Dematti

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="outer-container">
  <div class="container">
  <ul class="tabs-list"></ul>
   <div class="tabs-section">
     <div class="tabsSectionList">
       TabsSection1
     </div>
   </div>
   
    <div class="tabs-section">
      <div class="tabsSectionList">
       TabsSection1
     </div>
    </div>
    
     <div class="tabs-section">
       <div class="tabsSectionList">
       TabsSection1
     </div>
     </div>
     
      <div class="tabs-section">
        <div class="tabsSectionList">
       TabsSection1
     </div>
      </div>
      
       <div class="tabs-section">
         <div class="tabsSectionList">
          TabsSection1
         </div>
      </div>
      
      <div class="tabs-section">
         <div class="tabsSectionList">
         TabsSection1
       </div>
     </div>
     
      <div class="tabs-section">
          <div class="tabsSectionList">
         TabsSection1
       </div>
     </div>
     
      <div class="tabs-section">
           <div class="tabsSectionList">
         TabsSection1
       </div>
       </div>
</div>





<div class="container">
  <ul class="tabs-list"></ul>
  
 <div class="tabs-section">
   <div class="tabsSectionList">
       TabsSection2
     </div>
 </div>
 
    <div class="tabs-section">
      <div class="tabsSectionList">
       TabsSection2
     </div>
    </div>
    
     <div class="tabs-section">
       <div class="tabsSectionList">
       TabsSection2
     </div>
     </div>
     
      <div class="tabs-section">
        <div class="tabsSectionList">
       TabsSection2
     </div>
      </div>
      
       <div class="tabs-section">
         <div class="tabsSectionList">
       TabsSection2
     </div>
     </div>
     
     <div class="tabs-section">
         <div class="tabsSectionList">
       TabsSection2
     </div>
       </div>
</div>





<div class="container">
  <ul class="tabs-list"></ul>
  
 <div...

CSS

.container{
  border: 1px solid red;
  margin-bottom:10px;
}

JavaScript

let $container = $('.container');
let $tabsList = $('.tabs-list');
let $tabSectionList = $('.tabsSectionList');
if($tabSectionList.length){
  alert($tabSectionList.length);
    $tabSectionList.each(function(){
    $(this).closest($container).find($tabsList).append(
        `<li>${$(this).text()}</li>`
      );
  });

  } 
  
  
/*   const nodeList = document.querySelectorAll(".tabSectionList");
  for (let i = 0; i < nodeList.length; i++) {
  $(this).closest('.container').find('ul').append(
  
        `<li>${$(this).text()}</li>`
  
      );
  }
   */