Develop Reference

Jquery show or hide children link if it is available

I have a question on Jquery. If I click on Link1, which does not have any ul.children and the class current_page_item will be added(not shown in this code as it will be added automatically by Wordpress), then ul.children in Link2 should be hidden.
If i click on Link 2, which will have both class page_item_has_children current_page_item, in this case ul.children should be shown. I have tried my code bellow, which is i know it is absolutely wrong. Please give me your advices. Many thanks.
if($(.navigation).hasClass(page_item_has_children)){
(.navigation .page_item_has_children .children).hide();
}else if( $(.navigation).hasClass(page_item_has_children) && $(.navigation).hasClass(current_page_item)){
(.navigation .page_item_has_children .children).show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navigation">
<li>Link1</li>
<li class="page_item_has_children current_page_item">Link2
<ul class="children">
<li class="page_item">Link3</li>
<li class="page_item ">Link4</li>
</ul>
</li>
</ul>

This solution is a bit more towards your scenario (edited based on comment):
$(".navigation li").on("click", function() {
if ($(this).hasClass("page_item_has_children") && $(this).hasClass("current_page_item")) {
$(".navigation .children").show();
} else {
$(".navigation .children").hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navigation">
<li>Link1
</li>
<li class="page_item_has_children current_page_item links">Link2
<ul class="children">
<li class="page_item">Link3
</li>
<li class="page_item ">Link4
</li>
</ul>
</li>
</ul>

How about simply hiding all nested UL elements, then simply showing the children of the clicked one?
$(".navigation li").each(function() {
// When we first load, hide all nested menus.
$(this).children("ul").hide();
if (localStorage.menuNumber) {
$(".navigation li").eq(localStorage.menuNumber).children().show();
}
})
.on("click", function() {
// When any top-level ul is clicked, hide the
// nested menus then show the current one.
$(this).parent().children().find("ul").hide();
$(this).children().show();
// We also want to persist this selection,
// should the user refresh...
localStorage.menuNumber = $(this).index;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navigation">
<li>Link1
</li>
<li class="page_item_has_children current_page_item">Link2
<ul class="children">
<li class="page_item">Link3
</li>
<li class="page_item ">Link4
</li>
</ul>
</li>
</ul>
Edited it so that when it initially loads, all nested uls are hidden. Hope this helps! And edited again, to store the clicked menu in local storage. Sadly, for security reasons, this won't work here. See it as a fiddle: https://jsfiddle.net/snowMonkey/fnuvvLwb/

show category after click (jquery)

I made this simple script:
var jq111 = jQuery.noConflict();
jq111( ".main-cat" ).click(function() {
jq111( ".child" ).toggle( "slow" );
});
This show child category when i click on main-cat.
Example:
CAR
Audi <- show after click
Ferrari <- show after click
Fiat <- show after click
I have a problem that,all main category drop her child when i click one of their.
Another main category:
Bicycle, Motorcycle etc..
The categories are dynamic, all main have the same class because they are output by loop.
How can I expand only the categories within its container?
HTML:
<ul class="main-cat">
<li>CAR
<ul class="child">
<li>Ferrari</li>
<li>Fiat</li>
<li>Lamborghini</li>
</ul>
</li>
<ul class="main-cat">
<li>Motorcycle
<ul class="child">
<li>Honda</li>
<li>Example</li>
<li>Example</li>
</ul>
</li>

Try this:
<ul class="main-cat">
<li>CAR
<ul class="child">
<li>Ferrari</li>
<li>Fiat</li>
<li>Lamborghini</li>
</ul>
</li>
</ul>
<ul class="main-cat">
<li>BICYCLE
<ul class="child">
<li>Bike 1</li>
<li>Bike 2</li>
<li>Bike 3</li>
</ul>
</li>
</ul>
NOTE: the structure of the elements. They are wrapped in its own 'ul' tags
And your javascript:
$(document).ready(function() {
var jq111 = jQuery.noConflict();
jq111('.main-cat ul').hide() //hide all by default
jq111( ".main-cat" ).click(function() {
jq111('.main-cat ul').hide() //this will hide the elements if one is already open
jq111(this).find( ".child" ).show( "slow" );
});
});
The working demo is here:
https://jsfiddle.net/5j8ne1tz/

It's hard to make a definite recommendation without see the actual HTML - but perhaps this will work?
var jq111 = jQuery.noConflict();
jq111( ".main-cat" ).click(function() {
jq111(this).find( ".child" ).toggle( "slow" );
});
That should find each .child element below the .main-cat classed element that was clicked.

How to get the prev and next elements of a particular class which are not siblings

Here is my code :
<ul>
<li class="active">
<div class="course_video_heading"><span class="minus"></span> Introduction <div class="course_duration" align="right">1m 21s</div></div>
<ul>
<li class="course_video viewed">
Welcome <div class="course_duration" align="right">1m 21s</div>
</li>
<li class="course_video viewed">
I need to select this <div class="course_duration" align="right">1m 21s</div>
</li>
</ul>
</li>
<li>
<div class="course_video_heading"><span class="plus"></span> Warm up <div class="course_duration" align="right">1h 15m</div></div>
<ul>
<li class="course_video viewed current">
Roll down <div class="course_duration" align="right">57s</div>
</li>
<li class="course_video">
Roll down with demi pointe variation <div class="course_duration" align="right">57s</div>
</li>
<li class="course_video" data-file="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" data-image="http://content.bitsontherun.com/thumbs/nPripu9l-480.jpg">
Side roll down <div class="course_duration" align="right">57s</div>
</li>
<li class="course_video">
Side roll down variation with contraction <div class="course_duration" align="right">57s</div>
</li>
<li class="course_video">
Class exercise <div class="course_duration" align="right">57s</div>
</li>
</ul>
</li>
<li>
<div class="course_video_heading"><span class="plus"></span> Brushes <div class="course_duration" align="right">1h 5m</div></div>
<ul>
<li class="course_video">
Welcome <div class="course_duration" align="right">1m 21s</div>
</li>
</ul>
</li>
</ul>
My requirement : There is a element, <li class="course_video viewed current">, I need the previous li which has course_video class. In this case it would be :
<li class="course_video viewed">
I need to select this <div class="course_duration" align="right">1m 21s</div>
</li>
What have I tried :
$(".current").prev(".course_video")
This is not working as it is in different li
Note : It is not the duplicate of following questions :)
jQuery to find nearest Div of Parent
Getting next closest select element with jquery
jquery find closest previous sibling with class

Try this : read the index of current li and if it is 0 then find the previous li of its parent li and then find the course_video. And if index is not 0, then find previous li using prev()
var index = $(".current").index();
if(index==0)
{
var previousLi = $(".current").closest('li').prev('li').find("li.course_video:last");
}
else
{
var previousLi = $(".current").prev(".course_video");
}

var vindex;
$().ready(function () {
$("li .course_video").each(function (index) {
if ($(this).hasClass('current')) {
vindex = index;
}
});
$("li .course_video").each(function (index) {
if (index == vindex - 1) {
alert($(this)[0].outerHTML);
}
});
});
this code will help you.

$('.current').parents('li').prev().find('li:last')
Here's the jsFiddle

You can do it easily with a function that checks the index of the item: if the index is 0 then you'll select the last li in the previous ul.
Element.prototype.previousLi = function() {
var i = $(this).index(),
n = this.parentElement.previousSibling.children.length;
if (i) return this.parentElement.children[i-1];
else return this.parentElement.previousSibling.children[n-1];
}
Then you can do:
var el = $(".course_video.viewed.current")[0];
var previous = el.previousLi();

Try this code , it will give you the desired result :
<script>
var currentLI = $("li.current");
prevLi=$(currentLI).parent('ul').parent('li').prev('li').find('li.viewed:last');
alert($(prevLi).html());
</script>

Loop through LI's in one order, then go back another order - while fading

I'm trying to achieve a similar effect of that on the UrbanAirship.com, while providing a longer fade transition. I have achieved a one way fade using multiple UL's, with hidden LI's underneath them, and using the fade effect. I've achieved this with the Cycle2 JQUERY plugin, but I've also achieved it using some custom InOut code. I've been able to get a data-speed attribute I've assigned to the LI's to try and get the fade to go back across the main LI's, but after one loop they get screwy.
Here's the HTML:
<ul class="row" id="community-rotator">
<li>
<ul class="logos-1">
<li data-speed="5000"><img src="Leukemia&LymphomaSociety.png"></li>
<li data-speed="10000"><img src="BoysAndGirlsClub.png"></li>
<li data-speed="2000"><img src="SusanKomenPhoenix.png"></li>
</ul>
</li>
<li>
<ul class="logos-2">
<li data-speed="6000"><img src="AmericanCancer.png"></li>
<li data-speed="8000"><img src="NotreDamePrep.png"></li>
<li data-speed="4000"><img src="ChronsFoundation.png"></li>
</ul>
</li>
<li>
<ul class="logos-3">
<li data-speed="7000"><img src="RonaldMcDonaldHouse.png"></li>
<li data-speed="6000"><img src="SusanKomenFlorida.png"></li>
<li data-speed="6000"><img src="DMHS.png"></li>
</ul>
</li>
<li>
<ul class="logos-4">
<li data-speed="8000"><img src="phoenixchildrens.png"></li>
<li data-speed="4000"><img src="MIKID.png"></li>
<li data-speed="8000"><img src="RonanThompsonFoundation.png"></li>
</ul>
</li>
<li>
<ul class="logos-5">
<li data-speed="9000"><img src="100club.png"></li>
<li data-speed="2000"><img src="ASU.png"></li>
<li data-speed="10000"><img src="SunshineAcres.png"></li>
</ul>
</li>
And here's the hackedy Javascript:
function InOut( elem )
{
var delaySpeed = elem.data('speed')
elem.delay()
.fadeIn(500)
.delay(delaySpeed )
.fadeOut(
500,
function(){
if(elem.next().length > 0)
{InOut( elem.next() );}
else
{InOut( elem.siblings(':first'));}
}
);
}
$('.logos-1 li').hide();
InOut( $('.logos-1 li:first'));
$('.logos-2 li').hide();
InOut( $('.logos-2 li:first'));
$('.logos-3 li').hide();
InOut( $('.logos-3 li:first'));
$('.logos-4 li').hide();
InOut( $('.logos-4 li:first'));
$('.logos-5 li').hide();
InOut( $('.logos-5 li:first'));
Any help would be greatly appreciated, I'm new to this whole programming thing :)
Thanks!

Rather than re-invent the wheel, you might want to take a look at one of the many jquery sliders out there. Alternatively you could look into a JS and CSS framework that has this type of stuff fleshed out already.
Here is one example I found.
http://www.simplefadeslideshow.com/

How to select multiple elements with two .each() functions nested?

Ok guys, as promised, here is the real deal, first the sample html:
<li data-foo="bar">
<span id="a"></span>
<ul>
<li>
<span id="1"></span>
<ul>
<li>
<span id="b"></span>
</li>
</ul>
</li>
<li>
<span id="2"></span>
<ul>
<li>
<span id="c"></span>
</li>
</ul>
</li>
</ul>
</li>
<li data-foo="bar">
<span id="d"></span>
<ul>
<li>
<span id="3"></span>
<ul>
<li>
<span id="e"></span>
</li>
</ul>
</li>
<li>
<span id="4"></span>
<ul>
<li>
<span id="f"></span>
</li>
</ul>
</li>
</ul>
</li>
I want to get the window to pop up "12", then pop up "34"... so here is my nested functions attempt:
<script>
var poptext = "";
$('li[data-foo=bar]').each(
function () {
$(this li span).each(function () {
poptext = poptext + $(this).attr("id");
}
alert(poptext);
poptext = "";
);
}
);
</script>
This does not seem to be working, I think Jquery might got confused with multiple "this" keywords? Also there could be something wrong with the selector for those spans to begin with.
Thanks guys!

I think you are looking for the direct descendant selector: >
Used like this:
$('li[data-foo=bar]').each(function () {
var poptext = "";
$(this).find('> ul > li > span').each(function () {
poptext = poptext + $(this).attr("id");
});
alert(poptext);
});
Will only select the nodes that are direct children of the previous expression on the left hand side.
A more verbose, but maybe readable version could be:
$(this).children('ul').children('li').children('span') // selects the same
See it in action here: http://jsfiddle.net/xYgJg/

You have syntax errors in your code, $(this li span) should be $('li span', this) also your logic is off, you aren't filtering out the spans with the letter ids.