Selecting too many children
I have some code that creates tabs from a ul and li tag, and it works nicely and just the way I want it too.... that is until there is another ul tag/ li tag put inside the original li. I tried to set it so it would only select the immediate children of the ul tag such as $(ul#id > li).each(function(i){ etc. I narrowed down the spot were I am sure the goofyness happens before but I cannot find the actual problem. the problem is that the code treats the embeded li tags as if they were a trying to become a tab, which I don't want...
Any suggestions?
MY HTML
-
<ul id="tabs1">
<li>TabWorld 2<q>
<div>Wow! I know! Skipping right to 2.0 from 1.0? There were some inherent problems that needed to be addressed from the ground up so I am taking care of those now. Hope this works better
<ul><li>test</li></ul>
</div>
</q></li>
<li>It's Better<q>Why? Seriously I'll tell you why</q></li>
<li>test<q>test</q></li>
</ul>
<ul id="tabs3">
<li>Better Support<q>Things work better this way</q></li>
<li>Trust me<q>The old version was crap. Welcome to the new tabworld.</q></li>
<li>wtf<q>idk</q></li>
</ul>
MY JAVASCRIPT
-
// JavaScript Document
// Tab World 2
// From BenchSketch.com
// By Tanner Hildebrand
// ----------------------
// Email BenchSketch@Gmail.com with issues
// questions, comments, or if you want to say hi,
// ask me on a date, buy me a drink; whatever.
// Enjoy
(function($){
$.fn.extend({
// tabworld function
tworld: function(options){
// Get the user extensions and defaults
var opts = $.extend({}, $.fn.tworld.defaults, options);
// Content location
if(opts.contloc=="none"){ // if none use default
contloc=$(this).parent();
}else{ // else use specified
contloc=opts.contloc;
}
// Content location
if(opts.tabloc=="none"){ // if none use default
tabloc=$(this).parent();
}else{ // else use specified
tabloc=opts.tabloc;
}
// better define some stuff for safety
var newli="",newdiv=""; // this will creat your new container content
return this.each(function(i){ // start to loop through every occurance of this element
// VARIABLES
now=$(this); // here is where we are
nowid=now.attr("id");//lets get the id so we know where we are going
nowrel=now.attr("rel");//might as well steal all the data we can
nowtitle=now.attr("title");//I would like to know
nowclass=now.attr("class");// this is actually semi-important
//lets make them tabs
thoseli=$("ul#"+nowid+" > li"); // we better just get immediate children
thoseli.each(function(i){ // for each li tag lets do this
// VARIABLES AGAIN
here=$(this); // this li tag
qchild=$(this).children("q"); // immediate children of li for q
tcont=qchild.html() // find our content
qchild.remove(); // Gotta clear up some space
lcont=here.html() // Get the title of our tab
here.remove(); // get rid of this one now because we no longer need it
newli += "<li rel='"+nowid+"-"+i+"'><a>"+lcont+"</a></li>"; // Might as well create our tabs
newdiv += "<div id='"+nowid+"-"+i+"'>"+tcont+"</div>"; // and we need the content too
}); // well that was easy... we just made them tabs
// REMOVE OBJECT
now.remove(); // WOAH?!!? Did I just get rid of the entier ul...? Yup.
// RECREATE OBJECT
$(tabloc).append("<ul id='"+nowid+"' title='"+nowtitle+"' rel='"+nowrel+"' class='"+opts.color+" "+nowclass+"'>"+newli+"</ul>"); // Refix attributes
newdiv = "<div id='"+nowid+"content' class='tabcont'><div class='"+opts.area+"'>"+newdiv+"</div></div>";// Refix The content
newdiv = newdiv.replace(/\/>/,">"); // CLEAR THOSE DAMNED SELF CLOSING TAGS
$(contloc).append(newdiv); // And everthing is cool
// GOOFY UL HERE
// TABBING ACTION
// Find the default
ndef = nowid+"-"+opts.dopen; // this is the default
ncon = nowid+"content ."+opts.area+" > div"; // this is the content
$('#'+ncon).hide(); // hide content
$('#'+ndef).show(); // show default
// Gather derault behavior
deftab = $('li[@rel*='+ndef+"]"); // the rel
deftab.addClass(opts.tabactive); // add the active class
deftab.children("a").addClass(opts.tabactive); // also add it to the anchor
// Tab it UP
$("#"+nowid+" > li").click(function(){
here=$(this); // where we are
nbound=here.attr("rel"); // the rel that decides what div we are bound to
gpid=here.parent("ul").attr("id");
// Make the active class / remove it from others
$("#"+gpid+" > li."+opts.tabactive).removeClass(opts.tabactive); // tag off the li active
$("#"+gpid+" > li a."+opts.tabactive).removeClass(opts.tabactive); // tag off the li active
here.addClass(opts.tabactive); // slap the active on this one
$("#"+gpid+" li."+opts.tabactive+" > a").addClass(opts.tabactive); // slap the active on this ones anchor
// The real action! Also detirmine transition
if(opts.transition=="slide"){ // // stransitions slide
$('#'+gpid+'content .'+opts.area+' div:visible').slideUp(opts.speed, function(){ // hide visible
$('#'+nbound).find("div").show(); // show all divs
$('#'+nbound).slideDown(opts.speed); // slide down our content
});
}else if (opts.transition=="fade"){ // fades transition
$('#'+gpid+'content .'+opts.area+' div:visible').fadeOut(opts.speed, function(){ // hide visible
$('#'+nbound).find("div").show(); // show all
$('#'+nbound).fadeIn(opts.speed); // show content
});
}else{
$('#'+gpid+'content .'+opts.area+' div:visible').hide(opts.speed, function(){ // transitions show
$('#'+nbound).find("div").show(); // show all
$('#'+nbound).show(opts.speed); // show content
});
} // end opts if
});
}); // end return each
}// end tab world function
})// end $.fn.extend
// Defaults
$.fn.tworld.defaults = {
mislpace:'none',
speed:'fast',
color:'menu',
area:'space',
tabloc:'none',
contloc:'none',
dopen:0,
transition:'fade',
tabactive:'tabactive'
}; // end defaults
})(jQuery);// end function($)