I have added the Prototype library to my site, then add the following code.when i open the page, i want to all the content in the ul are hidden.
Event.observe(window, 'load', function() {
$$('.block-category li.parent ul').hide() //why this line doesn't work
$$('.block-category li.parent > a span').each(function (element) {
element.observe('click', function (e) {
e.element().up().next('ul').toggle();
e.preventDefault();
});
});
});
html:
<div class="block block-category">
<li class="level-top parent">
<span>text one</span>
<ul> //the 1 ul
<li><a><span>....</span></a></li>
<li><a><span>....</span></a></li>
<li><a><span>....</span></a></li>
<li><a><span>....</span></a></li>
</ul>
</li>
<li class="level-top"><span>....</span></li>
<li class="level-top parent">
<span>text two</span>
<ul> //the 2 ul
<li><a><span>....</span></a></li>
</ul>
</li>
<li class="level-top parent">
<span>text three</span>
<ul>
<li><a><span>....</span></a></li>
<li><a><span>....</span></a></li>
</ul>
</li>
</div>
thank you.
The $$() method returns a list of elements that match that CSS selector - if you want to iterate over them and run the same method use the invoke() method
$$('.block-category li.parent ul').invoke('hide');
$$('.block-category li.parent ul').invoke('observe','click',function(){
alert('element was clicked');
});
If you need to do more than just run a single method use the each() method
$$('.block-category li.parent ul').each(function(item){
item.hide();
//item.update('new content');
//etc
});
Try this, seams that hide cannot applied to a set of elements directly:
$$('.block-category li.parent ul').each(function(elm) {
elm.hide();
});
Related
I am have a link in a li and when you click on it, it should open a ul, also contained in the li. I can't seem to get it to select the right element though. Code below
HTML
<ul>
<li>
hi
<ul>
<li class="hidden">more stuff</li>
</ul>
</li>
</ul>
CSS
.hidden{display:none;}
Js
$( "a" ).click(function() {
$(this).parent("li").children("ul").css("display","block");
});
Since the ul is the next sibling to the a, you'd use next to access it. Then you can look at the ul's children (children) or descendants (find) for the .hidden one and remove the class (removeClass):
$(this).next().children(".hidden").removeClass("hidden");
Live Example:
$("a").on("click", function() {
$(this).next().children(".hidden").removeClass("hidden");
return false;
});
.hidden {
display: none;
}
<ul>
<li>
one
<ul>
<li class="hidden">more stuff</li>
</ul>
</li>
<li>
two
<ul>
<li class="hidden">more stuff</li>
</ul>
</li>
<li>
three
<ul>
<li class="hidden">more stuff</li>
</ul>
</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
In your code you are trying to make ul displayed although it is visible and it does not effect the li under it so you need to access that li like this. Removing the hidden class of the element to make it displayed is a better approach than assigning inline style as the commentators said
$(this).parent("li").children("ul").children("li").removeClass("hidden");
check here fiddler link...
hope it will help you....
$( "a" ).click(function() {
$(this).next().children(".hidden").removeClass("hidden");
});
This is my test HTML code:
<ul class="content">
<li class="data">
test1
<ul>
<li class="data">t1</li>
<li class="data">t2</li>
</ul>
</li>
<li class="data">
test2
<ul>
<li class="data">t3</li>
</ul>
</li>
<li class="data">
test3
<ul>
<li class="data">t4</li>
</ul>
</li>
jquery code is:
$(".content li").each(function(index, element) {
console.log(element);
});
In this function, all the li lists having class 'data' under the main ul.
But I need to iterate only the 3 parent li lists. How can I modify this jquery?
Kindly help me :)
Try to use child selecter > like,
$(".content > li").each(function(index, element) {
console.log(element);
});
in your jquery selector, add a > between .content and li..
$(".content > li").each(function (index, element) {
console.log(element);
});
> looks for immediate child instead of all childs
You can even use .children like bellow
$(".content").children('li').each(function(index, element) {
console.log(element);
});
DEMO
I have some extensive HTML element in the following (simplified) format:
<div id="firstdiv" class="container">
<ul>
<li id="4"> <a title="ID:4">Tree</a>
<ul>
<li id="005"> <a title="ID:005">Leaf Tree</a>
<ul>
<li id="10"> <a title="ID:10">Fruit Tree</a>
<ul>
<li id="0050338"> <a title="ID:0050338">Apple Tree</a>
<ul>
<li id="399"> <a title="ID:399">Green Apple Tree</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li id="005"> <a title="ID:005">Conifer</a>
<ul>
<li id="10"> <a title="ID:10">Pine Tree</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
I want to access the value of the title attributes of all a-tags inside the div-container with the id="firstdiv" on click.
I tried the following jQuery function but it didn't work:
$("#firstdiv").children("a").on('click', function () { /*some code here*/ });
Any ideas what I'm doing wrong?
children() only goes one deep try find()
$("#firstdiv").on('click', function () {
$(this).find('a').each(function(){
console.log($(this).attr('title'))
})
});
will get all a tags titles when the #first_div is clicked
$("#firstdiv a").on('click', function () {
console.log($(this).attr('title'))
});
will get the title of the a tag you clicked on
children() does what it says, looks at child nodes only - not descendant nodes also. For that, you need find(). However, you need neither in your case, just a change to your selector.
$('#firstdiv a')
As with CSS, a space in the selector denotes a child OR descendant.
According to the jQuery documentation
The .children() method differs from .find() in that .children() only
travels a single level down the DOM tree while .find() can traverse
down multiple levels to select descendant elements (grandchildren,
etc.) as well
So change your selector to:
$("#firstdiv").find("a").on("click", function () {});
This will search everything beneath #firstdiv in your DOM tree.
Or even:
$('#firstdiv a').click(function(){
... do stuff
});
That will select all 'a' elements within #firstdiv
Try this http://jsfiddle.net/ApfJz/22/
$("#firstdiv a").on('click', function () { alert($(this).attr('title')); });
Demo
$(document).ready(function() {
$('#firstdiv a').click(function(){
alert($(this).attr('title'))
});
});
$("#firstdiv").find("a").on('click', function () {
});
I have to remove all ul within li except the current li.
<ul>
<li id="Li0">
<ul>
<li><span>Childnode1</span></li></ul>
</li>
<li id="Li1">
<ul>
<li><span>Childnode2</span></li></ul>
</li>
<li id="Li2">
<ul>
<li><span>Childnode3</span></li></ul>
</li>
<li id="Li3">
<ul>
<li><span>Childnode4</span></li></ul>
</li>
<li id="Li4">
<ul>
<li><span>Childnode5</span></li></ul>
</li>
<li id="Li5">
<ul>
<li><span>Childnode6</span></li></ul>
</li>
</ul>
So If i click on the li with id 'li4' every other li that are previous to this li or next to this li should have there ul to be removed from dom.
I was thinking of using the .not operator in jquery but till now not able to do this.
is that what you are searching for?
$(function(){
$('li').click(function(){
$(this).siblings().children("ul").remove();
});
});
Demo: http://jsfiddle.net/wwvBL/
$('li').on('click',function(){
var obj= $(this);
id= obj.attr('id');
obj.parent().find('li:not(#'+id+') > ul').remove();
})
This should help.
$(function () {
$('ul:first').delegate("li[id^='L']", 'click', function () {
$("ul:first > li[id!='"+$(this).attr('id')+"'] > ul").remove();
});
});
Demo: http://jsfiddle.net/EJWnn/
Use siblings to find all other adjacent elements:
$("li").click(function() {
$(this).siblings().find("ul").remove();
});
You might want to have a more specific selector than "li".
I have aJQuery accordian using the following JS.
function initMenu() {
$('#accordion ul').hide();
$('#accordion li a').click(
function() {
$(this).next().slideToggle('normal');
}
);
}
$(document).ready(function() {initMenu();});
And the following HTML
<ul id="accordion">
<li><a class="firstheading" href="#">Making words work</a>
<ul class="panelContent">
<li>
<p>IPSUM</p>
</li>
</ul>
</li>
<li><a class="heading" href="#">Full business-writing services</a>
<ul class="panelContent">
<li>
<p>IPSUM<p>
</li>
</ul>
</li>
</ul>
Can anyone tell me how to ensure the first item is opened when the page loads?
You can use the gt selector to specify the ul's with an index greater than zero, so every ul except the first.
Demo here
function initMenu() {
$('#accordion ul:gt(0)').hide();
$('#accordion li a').click(
function() {
$(this).next().slideToggle('normal');
}
);
}
$(document).ready(function() {initMenu();});
It should be opening automatically, but you can open up accordion pieces programmatically like so:
.accordion( 'activate' , index )
so to open up the first section, you would do
$('#accordion').accordion('activate',0);
You could put that in your document ready function. Note that a selector can also be used in place of the number, which represents each section from 0 onwards.
Source