next() for jquery list prettifying

[es131245]

<ul><li>1</li><li>2</li><li>3</li></ul><ul><li><a href="3.1.pdf">3.1</a></li><li>3.2</li></ul><ul><li>4</li><li>5</li></ul><ul><li><a href="5.1.pdf">5.1</a></li></ul>

  <script type="text/javascript">   $(document).ready(function()   {$("[href$='.jpg'],[href$='.png']").imgPreview({imgCSS:{width:200}});	$('table.ir tr td ul li').each(function()	{if($(this).children().get(0)!=undefined){$(this).addClass('unit');}//  ??	});   });  </script>

but i cant get to work code for if($(this).next().is(ul)==true then){ if($(this).next().css("display")=='none'){$(this).next().slideOut(500);} else{$(this).next().slideUp(500);}} next function returns "" if next isnt li

[Ingolme]

I can't find .is() in the W3Schools reference. Can you look for the documentation to see what type of value it expects as a parameter?

[es131245]

is not js its jquery http://api.jquery.com/is/

[Ingolme]

I was checking the W3Schools jQuery reference. I suspected that the problem might be that you're missing quotation marks around the element name: if($(this).next().is(" ul ")==true then)

[dsonesuk]

?? if you look for next() which relates to siblings of table.ir tr td ul li, that surly would not find a sibling of element type UL, all its siblings are LI, it can have a parent UL, and child UL, but never a sibling UL, wouldn't it? got me rethinking it now!

[es131245]

got the same idea but stuck again on realization (hignlighted) $('table.ir tr td ul').each(function() { if( $(this).next().get(0)!=undefined && $(this).next().is('ul')==true && $(this).next().children('li').children('a').get(0) ) { $(this).children('li').last().click(function() { $(this).toggleClass('chosen'); $(this).children('li').click(function() { $(this).next().slideDown(500); }); }); $(this).children('li').last().addClass('recursive'); $(this).next().css({"display":"none"}); } }); }); jquery uses new $(this) var

[justsomeguy]

The value of this changes depending on which function you're in, so in the outer function where it has the correct value you're looking for then you'll need to save that value into another variable that you can access in the inner function.

[dsonesuk]

With your current html code you supplied, the jquery does not seem to relate to this html code at all, what exactly are you trying to do? as as i see it you have four individual menus, without submenus ul, and no relation to a one single menu with multiple submenu ul at all.

[es131245]

got it done this way but... bold area needs to be done for all next "li.unit" elements until we come to first non "li.unit" <ul> <li>200</li> <li><a href="/source/pdf/production/23.pdf">23</a></li> <li>220</li> <li>230</li> <li><a href="/source/pdf/production/23-1.pdf">23-1</a></li> <li><a href="/source/pdf/production/23-2.pdf">23-2</a></li> <li><a href="/source/pdf/production/23-3.pdf">23-3</a></li> <li>300</li> <li><a href="/source/pdf/production/30.pdf">30</a></li> <li>330</li> <li>360</li> </ul> $(document).ready(function() {$('table.ir tr td ul li a').each(function() {$(this).parent().addClass('unit'); if($(this).parent().prev().has('a')) {$(this).parent().prev().addClass('recursive');} }); $('.unit').css({"display":"none"}); $('.recursive').click(function() {$(this).toggleClass('chosen'); $(this).next().slideToggle(500); }); });

[es131245]

done it.

  <script type="text/javascript">   $(document).ready(function()   {$("[href$='.jpg'],[href$='.png']").imgPreview({imgCSS:{width:200}});    $('img.access').mouseover(function(){$('img.access').fadeTo(500,1);});    $('img.access').mouseout(function(){$('img.access').fadeTo(500,0);});    $('table.ir tr td ul li a').each(function()    {$(this).parent().addClass('unit');	 if($(this).parent().prev().has('a'))	 {$(this).parent().prev().addClass('recursive');}    });    $('.unit').css({"display":"none"});    $('.recursive').click(function()    {$(this).toggleClass('chosen');	 $(this).nextUntil('li:not(.unit)').slideToggle(500);    });   });  </script>

	    <ul>		 <li>LD 200</li>		 <li><a href="/source/pdf/production/ld200300.pdf">LD 200 300</a></li>		 <li>LD 220</li>		 <li>LD 230</li>		 <li><a href="/source/pdf/production/ld230100.pdf">LD 230 100</a></li>		 <li><a href="/source/pdf/production/ld230200.pdf">LD 230 200</a></li>		 <li><a href="/source/pdf/production/ld230300.pdf">LD 230 300</a></li>		 <li>LD 300</li>		 <li><a href="/source/pdf/production/ld300200.pdf">LD 300 200</a></li>		 <li>LD 330</li>		 <li>LD 360</li>	    </ul>

[dsonesuk]

Is 'recursive' class only supposed to appear on li elements with no anchors, WHOSE siblings li element contain anchor elements? because at present its appearing in all but the first of group of one OR the last of a group larger than one li elements.

[dsonesuk]

I think you are looking for this kind of jquery code

$(document).ready(function() 	{	$('table.ir tr td ul li').each(function()		{		hasAnchor = $(this).next("li").children().is("a");		if(hasAnchor)			{			$(this).not($("table.ir tr td li a").parent()).addClass('recursive')			}				//$(this).attr("href","javascript: void(0)"); // temp just used to stop links working		$(this).children("a").parent().addClass('unit');		 });	$('.unit').css({"display":"none"});	$('.recursive').click(function()		{		$(this).toggleClass('chosen');		$(this).nextUntil('li:not(.unit)').slideToggle(500);		});	});

[es131245]

Dont know why but your code behaves like an error is there =) moreover i found a stange line in my code which shouldnt be there.

  <script type="text/javascript">   $(document).ready(function()   {$('table.ir tr td ul li a').each(function()    {$(this).parent().addClass('unit');	 $(this).parent().prev().not(':has(a)').addClass('recursive');    });    $('.recursive').click(function()    {$(this).toggleClass('chosen');	 $(this).nextUntil('li:not(.unit)').slideToggle(500);    });    $('li.recursive').nextUntil('li:not(.unit)').slideUp();   });  </script>

http://wgm.y-es.ru/production.html