Hide all instances of LI except first in UL jQuery

April 26, 2022

I have 100 instances of this class on my in my HTML status-list. I would like to loop over all the UL elements with this class and hide all nested list items except the first one. How can I achieve this using jQuery?

I have tried the following but receive this error:

[0].siblings is not a function

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.
Visit Medevel

$('.status-list').each(function(i, obj) {
    ($(this)[0]).siblings().hide();
});

I realize this code above would hide all objects under the ul, however I am struggling to just be able to hide sibling elements at all.

>Solution :

You should use css selectors

$('.status-list').each(function() {
  $(this).children("li:not(:first-child)").hide();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="status-list">
  <li>list 11</li>
  <li>list 12</li>
  <li>list 13</li>
  <li>list 14</li>
  <li>list 15</li>
  <li>list 16</li>
</ul>

<ul class="status-list">
  <li>list 21</li>
  <li>list 22</li>
  <li>list 23</li>
  <li>list 24</li>
  <li>list 25</li>
  <li>list 26</li>
</ul>