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
$('.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.
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>