I have some HTML markup that looks like this,
</a>
<nav>
<ul>
<li><img src="/media/icons/view.jpg" alt="Views"/> 210</li>
<li><img src="/media/icons/like.jpg" alt="Likes"/> 45</li>
<li class="jobs">52 New Jobs</li>
</ul>
</nav>
<ul class="job_listings">
<li>Outbound Telesales Assistant ></li>
<li>Business Development Manager ></li>
</ul
</li>
The .job_listings is hidden on dom ready and needs to be show when li.jobs a is clicked, I have tried this with the following, jQuery:
$('#jobwall .jobs a').click(function(){
$(this).next('.job_listing').show();
return false;
});
You should get the next element of nav element and not the anchor, and also you are missing s in the .job_listing selector.
Try this:
$('#jobwall .jobs a').click(function(){
$(this).closest("nav").next('.job_listings').show();
return false;
});
Here you go:
$(this).closest('#commonContainer').find('.job_listings').show();
Related
Here my html :
<ul id="navLeft">
<li>
<a class="nav_a">aaaa</a>
<ul class="children">
<li><a>1111</a></li>
<li><a>1111</a></li>
<li><a>1111</a></li>
</ul>
</li>
<li>
<a class="nav_a">bbbb</a>
<ul class="children">
<li><a>2222</a></li>
<li><a>2222</a></li>
<li><a>2222</a></li>
</ul>
</li>
<li>
<a class="nav_a">cccc</a>
<ul class="children">
<li><a>3333</a></li>
<li><a>3333</a></li>
<li><a>3333</a></li>
</ul>
</li>
</ul>
</body>
CSS:
.children{
display: none;
}
jquery:
$(".nav_a").click(function () {
$('ul.children').not($(this).next('ul.children')).removeClass("expanded").slideUp();
$(this).next('ul.children').toggleClass("expanded").slideToggle(250);
});
#navLeft li:first-child .children{
display:block;
}
I hope this css is what you are looking for. If this is not working Please give a detailed description.
Can you please Check the below script instead of your script and tell me this is what you are looking for.
$('#navLeft li>a').click(function(){
$('ul.children').not($(this).next('ul.children')).removeClass("expanded").slideUp();
$(this).next('ul.children').toggleClass("expanded").slideToggle(250);
});
If this is what you are trying to acheive then don't forget to mark it as a correct answer.
$('#navLeft li>a').click(function(){
$(this).next('ul.children').toggleClass("expanded").slideDown(250);
});
Try the above script instead of the script You are using
$(".nav_a").click(function () {
if($(this).next('ul.children').hasClass("expanded"))
return;
$('ul.children').not($(this).next('ul.children')).removeClass("expanded").slideUp();
$(this).next('ul.children').toggleClass("expanded").slideToggle(250);
});
I am designing dynatree so nodes are place in ul and li tags. the problem I am getting is I am not getting parents of clicked li element.
Here is my html code,
<ul class="bulk">
<li>gp1
<ul>
<li>gp2
<ul>
<li>gp3
<ul>
<li>c1
<li>c2
<li>c3
</ul>
<li>gp4
</ul>
</ul>
<li>gp5
<ul>
<li>gp6
<ul>
<li>gp7
<ul>
<li>c4
<ul>
<li>c5
<li>c6
</ul>
</ul>
<li>gp8
<li>gp9
</ul>
<li>gp10
</ul>
</ul>
Here is my jquery method
$('ul.bulk li').click(function(e)
{
//alert($(this).find("span.t").text());
alert(e.html());
});
Here is my fiddel http://jsfiddle.net/raghavendram040/ojnLrcjz/
The problem I am getting is if click on gp3 it alerts me 3 times, but I want if I click on gp3 it should alert its parents(gp1 and gp2). Here I place all li and ul dynamically except tag. How to achive this please help me in this
You can do something like
$(function () {
$('ul.bulk li').click(function (e) {
if($(e.target).is(this)){
$(this).parentsUntil('.bulk', 'li').each(function(){
alert(this.firstChild.nodeValue)
})
}
});
});
Demo: Fiddle
I have a dropdown of image icons. Now I want to change the dropdown's default page load icon to one selected by the user, using javascript. I am new to javascript but can not do it. FYI,I have included jquery files too. Please help.
<li>
<div class="dropdown choose-theme" id="theme">
<a class="#" data-toggle="dropdown" href="#"><img src="img/theme/blue.png" alt="Blue"> Blue</a>
<ul class="dropdown-menu" role="menu">
<li role="menuitem"><img src="img/theme/green.png" alt="Green" value="img/theme/green.png"> Green</li>
<li role="menuitem"><img src="img/theme/grey.png" alt="Grey" value="img/theme/grey.png"> Grey</li>
<li role="menuitem"><img src="img/theme/red.png" alt="Red" value="img/theme/red.png"> Red</li>
<li role="menuitem"><img src="img/theme/orange.png" alt="Orange" value="img/theme/orange.png"> Orange</li>
<li role="menuitem"><img src="img/theme/blue.png" alt="Blue" value="img/theme/blue.png"> Blue</li>
</ul>
</div>
</li>
Custom javascript I was trying
$(function()
{
$('#theme ul li').click(function({
var $a = $(this).find('a');
$(this).parents('#theme').children('a').replaceWith($a);
});
Try this
$(document).ready(function(){
$('#theme ul li a').click(function(){
$(this).parents('#theme').children('a').html($(this).html());
});
});
You were missing a couple of parentheses and curlies there:
$(function(){
$('#theme ul li').click(function(){
var $a = $(this).find('a');
$('#theme').children('a').replaceWith( $a.clone() );
});
});
I replaced $(this).parents('#theme') with just $('theme') (it's an ID, you should always one and don't need to traverse to find it).
Also did $a.clone();, otherwise the clicked link would actually be removed from the list.
<ul>
<li class="active"><a href="#block1">1<a/> </li>
<li><a href="#block2">2<a/> </li>
<li>3</li>
<ul>
<div id="block1">
Block1
</div>
<div id="block2">
Block2
</div>
$('ul li:has(a)').on('click', function(e){
$(this).closest('li').addClass('active').siblings('li').removeClass('active');
$('*[id^="block"]').hide();
.filter(this.hash).show(); //WRONG//
e.preventDefault();
});
ONLINE SAMPLE
I know this would be easy to make the jQuery to just click on a tag and .filter(this.hash).show(); ,
$('ul li a').on('click', function(){
$('*[id^="block"]').hide().filter(this.hash).show();
}
but I want to know & learn if there is another method to make this works. Thanks!
Your HTML is incorrect, which causes a lot of problems:
You are using <a/> instead of </a>.
You are using <ul> instead of </ul>.
You are using $('*[id^="tab"]').hide(); to try to hide the elements, but the identities are block1 are block2, not tab1 and tab2.
You are using closest("a") to try to find the link, but the link is inside the list item, not surrounding it.
Corrected HTML:
<ul>
<li class="active">1 </li>
<li>2 </li>
<li>3</li>
</ul>
<div id="block1">
Block1
</div>
<div id="block2">
Block2
</div>
Corrected Javascript:
$('*[id^="block"]').hide();
$('*[id^="block"]:first').show();
$('ul li:has(a)').on('click', function (e) {
$(this).addClass('active').siblings('li').removeClass('active');
$('*[id^="block"]').hide();
$($(this).find("a").attr('href')).show();
e.preventDefault();
});
Demo: http://jsfiddle.net/Y2TaT/2/
I have one Activity xml file and I am try to get from activity when click on activity there child display. Its look like end of the all click.
<ul id="firstLevelChild">
<ul id="ul">
<li id="4">Activities
<ul class="ul">
<li id="10066">Physical1
<ul class="ul">
<li id="10067">Cricket
<ul class="ul">
<li id="10068">One Day</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</ul>
Now I want that if li have no leaf node then its display in other another div. Something like:
Click on Acitivities there have child node Physical1 and there also child Cricket and there chil One Day now one day have no child when click on one day its display in my <div id="result"></div>
I would add this as a comment, but I don't have enough rep. ChildNodes() isn't a function - since it looks like you're using jQuery, try children() instead.
I think javascript could helpr you there. A part from the fact that you first build your DOM correct ;)
The hasChildNodes() method returns TRUE if the current element node has child nodes, and FALSE otherwise.
http://www.w3schools.com/dom/met_element_haschildnodes.asp
Assuming the markup you provided is how it's going to be always i.e. ul as child for all li. You just check if ul exists inside the current li. See fiddle
HTML
<div id="content">
<ul id="firstLevelChild">
<li>
<ul id="ul">
<li id="4">Activities
<ul class="ul">
<li id="10066">Physical1
<ul class="ul">
<li id="10067">Cricket
<ul class="ul">
<li id="10068">One Day</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<h2>Result</h2>
<ul id="result"></ul>
JS
$('#content li').each(function (i) {
//for display purpose only
$('#content').append('<span class="list">li(' + i + '):' + $('ul', $(this)).length + '</span>');
//the code you needed
if ($('ul', $(this)).length < 1) {
$(this).on('click', function () {
$('#result').append($(this).parent().html());
});
}
});