Jump to content

next() for jquery list prettifying


es131245
 Share

Recommended Posts

<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

Link to comment
Share on other sites

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)

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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); }); });

Edited by es131245
Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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.

Edited by dsonesuk
Link to comment
Share on other sites

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);		});	});

Edited by dsonesuk
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...