Find children

Question

I have this html structure:

<ul class="shopp_categories"> <li><a href="#">TEXT</a> <ul class="children"> <li><a href="#">TEXT</a></li> </ul> </li> <li><a href="#">Text</a></li> <li><a href="#">TEXT</a> <ul class="children"> <li><a href="#">TEXT</a></li> </ul> </li> </ul> 

This is my js code:

 jQuery('#sidebar .shopp_categories ul.children').parent().prepend('<span class="sidebar_cats_more"></span>'); jQuery('.sidebar_cats_more').click(function(){ var $children_list = jQuery(this).find('ul').children().children(); alert($children_list.html()); $children_list.slideToggle(1000, function () { if ( $children_list.is(':visible') ) { } if ( $children_list.is(':hidden') ) { } }); }); 

I need to find a list of children from a list item, where

 span.sidebar_cats_more 

It was supposed. If I found this list, it should be animated using a slide tug. The problem is on this line:

 var $children_list = jQuery(this).find('ul').children().children(); 

Answer 1

The <ul> element is not a child of .sidebar_cats_more ; This is the child of the item after it. (to which you added).

Write $(this).parent().find('ul') or $(this).next().find('ul') .

Answer 2

span.sidebar_cats_more has no children, so it will not find the ul element. try

 var $children_list = jQuery(this).siblings('ul');