Selectively changing hrefs of a class - javascript

I'm working on a drop-down menu, and would like to selectively change the href attribute for certain elements. The menu is made up of two classes, the menuitems and the submenu items. Every menuitem has a corresponding submenu, but some of the submenus contain empty lists. For the menuitems that have an empty submenu list, I want the href to be "#".
<div id="info" class="menuitem">Info<!--start menuitem-->
<div id="infosubmenu" class="submenu"><!--start submenu-->
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
</div><!--end submenu-->
</div><!--end menuitem-->
<div id="business" class="menuitem">Business<!--start menuitem-->
<div id="businesssubmenu" class="submenu"><!--start submenu-->
<ul>
<li>Item1</li>
<li>Item2</li>
</ul>
</div><!--end submenu-->
</div><!--end menuitem-->
<div id="jobs" class="menuitem">Jobs<!--start menuitem-->
<div id="jobssubmenu" class="submenu">
<ul>
</ul>
</div><!--end submenu-->
</div><!--end menuitem-->
I've tried different variations of this code with $.each loops and regular javascript, but everything I've done either changes all the menuitem hrefs to "#", or doesn't change any of them.
if (!$('.menuitem').children('.submenu').children('ul').children('li').length > 0) {
$('.menuitem').children('a').attr('href', '#'); }
If anyone can show me what I'm doing wrong I'd really appreciate it! My test page can be found here.

$(".menuitem > a").each(function () {
if ($(this).next('.submenu').find('li').length > 0)
$(this).attr("href","#");
});
DEMO

I think this is what you're looking for:
$('.menuitem')
.children('.submenu')
.each(function(index) {
if($(this).children('ul').children('li').length === 0) {
$(this).closest('.menuitem').children('a').attr('href', '#');
}
});
For every submenu it checks the length of the ul > li array, and if it is 0 i changes the href of the link in the closest parent menuitem.

Related

jquery, move element to closest div

I want to move some span elements to closest div. I found the solution to my problem but it does not work for me. I have some Html code:
<ul>
<li>
<a><span>Some info</span></a>
</li>
<div class="cl1">...</div>
<li>
<a><span>Some info 2</span><a>
</li>
<div class="cl1">
...
</div>
...
</ul>
and to move <span> like this:
$('span').each(function () {
$(this).parent().parent().closest('.cl1').append(this);
})
but nothing happened. Any help would certainly be appreciated
you can't put a div in a ul, only li's.
your html has to be valid (a's, ul need to be closed)
Closest searches anscetors, not siblings.
since your markup is not valid as is, i'm not sure if you want the divs in the list or not. This example removes them from the lis, which breaks the list into two lists.
$('button').click(function() {
$('span').each(function() {
var $div = $(this).closest('ul').siblings('.cl1');
$(this).clone().appendTo($div);
$(this).remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<a><span>Some info</span></a>
</li>
</ul>
<div class="cl1">...</div>
<ul>
<li>
<a><span>Some info 2</span></a>
</li>
</ul>
<div class="cl1">...</div>
<button>Do Stuff</button>

Changing the active class as well as content in nav pills

Basically I'm trying to create a "wizard" via bootstrap where the active tab changes when the "continue" button is clicked. I've managed to come up with the following code:
<div id="rootwizard">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav nav-pills">
<li class="active">Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
</ul>
</div>
</div>
</div>
<div class="tab-content">
<div class="tab-pane" id="step1">
<a class="btn" href="#step2" data-toggle="tab">Continue</a>
</div>
<div class="tab-pane" id="step2">
Step 2
<a class="btn" href="#step3" data-toggle="tab">Continue</a>
</div>
<div class="tab-pane" id="step3">
Step 3
</div>
</div>
</div>
Right now it works fine when I click the nav pills themselves (the content changes and the active pill changes too).
However when I click the individual continue button the content changes but the active nav pill does not change.
Why doesn't the active class change like when I click the pill itself?
Here's a jsFiddle with the code:
http://jsfiddle.net/MvY4x/5/
Just found this much more elegant solution...
$('ul.nav.nav-pills li a').click(function() {
$(this).parent().addClass('active').siblings().removeClass('active');
});
from: http://info.michael-simons.eu/2012/07/30/twitter-bootstrap-make-the-default-pills-more-usable/
You could use jQuery to activate the next tab and it's content. Give all of your continue buttons a class like 'continue' and then you can do something like this..
$('.continue').click(function(){
var nextId = $(this).parents('.tab-pane').next().attr("id");
$('[href=#'+nextId+']').tab('show');
})
Demo on Bootply: http://bootply.com/112163
you could add Ids to the pills (step1tab, etc) and then make a function a function like this:
function switchPill(a,b){
$("#step"+a+"tab").removeClass("active");
$("#step"+b+"tab").addClass("active");
}
and add this to the anchor tag of the text:
onClick="switchPill(2,3)"
I hacked this fiddle: http://jsfiddle.net/MvY4x/7/
$('div.tab-content a[data-toggle]').on('click', function ()
{
var that = $(this),
link = that.attr('href');
$('a[href="' + link + '"]').not(that).trigger('click');
});
Really a bad ass hack, needs improvement but may give an idea...

jQuery accordion slides up multiple times

I'm making a jquery accordion and I have some issues
My jQuery searches for a ul inside a class and if it has a certain class it slides down, but it slides down as many times as the element ul exists in the whole nav
Here is my jquery code so far:
if($(this).has("ul").length){
$(".menu ul li").on('click',function(e){
$(this).addClass('open').siblings().removeClass('open').children();
$('.menu ul li ul').slideUp();
if($(this).parents().find(".open").length){
$(this).children('ul').slideDown();
}
//$(this).parents().find(".open").children('ul').slideDown();
e.preventDefault();
});
};
this is my html:
<div class="menu">
<a id="jump" href="#"><p>Menu</p><span class="right">▼</span></a>
<nav class="row">
<div class="page_wrapper">
<ul class="niveau_1">
<li class="active">Home</li>
<li>Group
<ul class="sub-menu">
<li>QHSE/Awards</li>
<li>Vacatures/</li>
</ul>
</li>
<li>Nieuws & Media
<ul class="sub-menu">
<li>Van Moer in de media</li>
<li>Nieuwsarchief</li>
</ul>
</li>
<li>Sport & Events
<ul class="sub-menu">
<li>Casual Friday
<ul>
<li>Inschrijving</li>
<li>Foto's</li>
</ul>
</li>
<li>Thursday Lounge</li>
<li>Triatlon</li>
<li>Sponsoring</li>
<li>Beurzen</li>
<li>Kalender</li>
</ul>
</li>
<li>Vestigingen</li>
<li>Contact</li>
</ul>
</div>
just guessing sincei don't have HTML to look too... your problem is here in parents()
Get the ancestors of each element in the current set of matched elements, optionally filtered by a selector.
i think u need parent() here
Get the parent of each element in the current set of matched elements, optionally filtered by a selector.
if($(this).parent().find(".open").length){ //try this
$(this).children('ul').slideDown();
}
note: it would be easy if you provide us with your HTML too

How to hide sub-menu when other menu clicked JQuery

I'm trying to figure out one thing, I have a one page website and want hide sub-menus under portfolio when other menu links cliked http://jsfiddle.net/kuuwj/15/
HTML
<ul id="navbar">
<li>Home</li>
<li>Portfolio
<div class="portfolio-apps">
<section id="website">
<span class="button">AAAAAAAAAAAAAAAAAAAAAA</span>
</section>
<section id="gterminal">
<span class="button">BBBBBBBBBBBBBBBBBBBBBB</span>
</section>
<section>
<span class="button">CCCCCCCCCCCCCCCCCCCCCC</span>
</section>
</div>
</li>
<li>About Me</li>
<li>Contact</li>
</ul>
JS
$(document).ready(function () {
var portf_apps = $('.portfolio-apps');
portf_apps.hide();
$('#nav-portfolio').click(function() {
portf_apps.show();
});
});
Change your Javascript to this:
$('#navbar > li > a').click(function(){
portf_apps.hide();
});
$('#nav-portfolio').unbind('click').click(function() {
portf_apps.show();
});
Bind another click event to the other navbar elements before the portfolio showing one:
$("#navbar a").on('click', function () {
$(".portfolio-apps").hide();
});
var portf_apps = $('.portfolio-apps');
...
This will cause the portf_apps method to trigger afterwards which will show its children even if it's clicked. I suggest updating this to work with parent-child relationships generally, though.
http://jsfiddle.net/jWujm/

JavaScript hasClass ignoring element's class?

I have an Isotope filter menu and I'm using hash history so the filters are still set if a user comes back to the page. Because we are using .slideDown to expand sub-menu items, the sub-menu items are hidden when you come back to the page even though some filters within them are selected.
I'm trying to use:
if ($('#option1').hasClass('.selected')) {
$('.level-two').slideDown('fast');
}
However, since the class "selected" is being generated by the jQuery filter (Isotope), it's being ignored.
Fiddle: http://jsfiddle.net/RevConcept/swT84/
HTML:
<nav>
<div id="options" class="combo-filters">
<div class="option-combo location">
<ul class="filter option-set group level-one" data-filter-group="location">
<li class="hidden">any</li>
<li><a id="option1" href="#filter-location-exterior" data-filter-value=".exterior" class="trigger-two">exterior</a></li>
<li><a id="option2" href="#filter-location-interior" data-filter-value=".interior" class="trigger-two">interior</a></li>
</ul>
</div>
<div class="option-combo illumination">
<ul class="filter option-set group level-two" data-filter-group="illumination">
<li class="hidden">any</li>
<li>illuminated</li>
<li>non-illuminated</li>
</ul>
</div>
<div class="option-combo mount">
<ul class="filter option-set group level-three" data-filter-group="mount">
<li class="hidden">any</li>
<li>wall</li>
<li>ground</li>
</ul>
</div>
</div><!--end options-->
</nav>
CSS:
header nav ul.level-two, header nav ul.level-three {
display:none;
}
JavaScript:
$(function(){
$('.level-one').hide().fadeIn('fast');
});
$(".trigger-two").one('click', function(){
$(".level-two").slideDown('fast');
});
$(".trigger-three").one('click', function(){
$(".level-three").slideDown('fast');
});
if ($('#option1').is('selected')) {
$('.level-two').slideDown('fast');
}
I guess you are missing a '.'
if ($('#option1').is('.selected')) {
$('.level-two').slideDown('fast');
}
Rather than copy the same process of each click with a repeated function you could always programatically trigger the clicks on the .selected anchors.
$('.option-combo a.selected').trigger('click');
A fiddle: http://jsfiddle.net/jgkwd/

Categories

Resources