Let's say we have this list:
<ul title="Fruit">
<li onClick="func(this)">Apple</li>
<li onClick="func(this)">Banana</li>
</ul>
<ul title="Meat">
<li onClick="func(this)">Chiken</li>
<li onClick="func(this)">Duck</li>
</ul>
Is it possible to find from which ul the li is clicked?
Yes, use parentNode:
<script type="text/javascript">
function func(el) {
alert(el.parentNode.title);
}
</script>
<ul title="Fruit">
<li onClick="func(this)">Apple</li>
<li onClick="func(this)">Banana</li>
</ul>
<ul title="Meat">
<li onClick="func(this)">Chiken</li>
<li onClick="func(this)">Duck</li>
</ul>
Also note that value is only used for form elements such as input and select.
DEMO.
You should just pass this to the function, and use .parentNode to get its parent.
function func(element) {
var parent = element.parentNode;
// ...
}
if(this.parentNode.title === "Fruit") {
// first one
}
else {
// the other ul
}
obj.parentNode or using jQuery just: $(obj).parent()
Related
I am new in Jquery
My Webpage structure is like this
<div id="MenuSection">
<ul>
<li>Master // Main Menu
<ul>
<li>Master1</li>
<li>Master2</li>
<li>Master3</li>
</ul>
</li>
<li>Transaction // Main Menu
<ul>
<li>Transaction1</li>
<li>Transaction2</li>
<li>Transaction3</li>
</ul>
</li>
<li>Report // Main Menu
<ul>
<li>Report1</li>
<li>Report2</li>
<li>Report3</li>
</ul>
</li>
</ul>
</div>
I want that when all the children of any Parent(main menu) are hidden, Parent should also be hidden. Let's say if Report1, Report2, Report3 are hidden then Parent that is "Report" should also be hidden.
How can I achieve this through Jquery ?
One way is to iterate over each main menu li to see if its children are all :visible:
$("#MenuSection>ul>li").each(function() {
if ($(this).find(">ul>li:visible").length == 0) {
$(this).hide();
}
});
there are other ways to do this, such as using .filter or .map, but this should get you what you need.
Given the nested ul's the above uses > to ensure only the directly ul>li children are processed. If you have multiple levels, you might need to change accordingly, eg for the first: #MenuSection li would apply to all lis and the second .find(">ul>li:visible") only looks at direct li children.
$("#MenuSection>ul>li").each(function() {
if ($(this).find("li:visible").length == 0) {
$(this).hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="MenuSection">
<ul>
<li>Master
<ul>
<li>Master1</li>
<li>Master2</li>
<li>Master3</li>
</ul>
</li>
<li>Transaction
<ul>
<li>Transaction1</li>
<li>Transaction2</li>
<li>Transaction3</li>
</ul>
</li>
<li>Report
<ul>
<li style='display:none'>Report1</li>
<li style='display:none'>Report2</li>
<li style='display:none'>Report3</li>
</ul>
</li>
</ul>
</div>
JavaScript does it fairly easy. You would need expand on this to execute this check every on the relevant list every time you hide or show a list item.
function isHidden(array) {
for(var i = 0; i < array.length - 1; i++) {
if(array[i+1].style.display != "none") {
return false;
};
};
return true;
};
var children = document.getElementById("report").getElementsByTagName("LI");
if (isHidden(children)) {
document.getElementById("report").style.display = "none";
};
You can use the the .is(':visible')
See the code:
(function($) {
$(document).ready(function() {
var $mainLinks = $('#MenuSection > ul > li');
$.each($mainLinks, function() {
if (!$(this).find('li').is(':visible')) {
$(this).hide();
}
});
});
})(jQuery);
#MenuSection > ul > li:last-child li {
display: none;
}
#MenuSection > ul > li:first-child li:first-child {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="MenuSection">
<ul>
<li>Master // Main Menu
<ul>
<li>Master1</li>
<li>Master2</li>
<li>Master3</li>
</ul>
</li>
<li>Transaction // Main Menu
<ul>
<li>Transaction1</li>
<li>Transaction2</li>
<li>Transaction3</li>
</ul>
</li>
<li>Report // Main Menu
<ul>
<li>Report1</li>
<li>Report2</li>
<li>Report3</li>
</ul>
</li>
</ul>
</div>
I'm having trouble with this condition :
I have a series of li with a class, and I want to execute code if one of the li does not have this class.
For example :
<ul class="list-synthese">
<li class="hidden">Lorem</li>
<li class="hidden">Lorem</li>
<li class="hidden">Lorem</li>
<li class="hidden">Lorem</li>
<li>Lorem</li>
</ul>
Here is what I want to do :
if $('list.synthese > li').hasNOTclass('hidden'){
mycode;
}
Hope someone can help me !
Thanks ! :)
You can use :not selector. also you have incorrect selector for ul element:
if($('.list-synthese > li:not(.hidden)').length){
mycode;
}
A bad approach but working: Fiddle
$(function() {
$('.list-synthese > li').each(function(i, ele) {
if (!$(ele).hasClass('hidden')) {
alert('li number ' + (i + 1) + ' doesnt have class hidden')
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-synthese">
<li class="hidden">Lorem</li>
<li class="hidden">Lorem</li>
<li class="">Lorem</li>
<li class="hidden">Lorem</li>
<li>Lorem</li>
</ul>
I have the following HTML:
<ul id="sortable1 venuetags" class="connectedSortable">
<li id="venuetagli">fried</li>
<li id="venuetagli">garlic</li>
<li id="venuetagli">rosemary</li>
<li id="venuetagli">new potatoes</li>
</ul>
And am trying to get the values of each using JQuery:
$('#venuetagli').each(function(j,li) {
console.log(j,li)
})
However, from the console I am only getting the first value returned.
The ids are supposed to must be unique that is why you are getting single element use class selector instead. Also the id of UL would not have space.
Html
<ul id="sortable1 venuetags" class="connectedSortable">
<li class="venuetagli">fried</li>
<li class="venuetagli">garlic</li>
<li class="venuetagli">rosemary</li>
<li class="venuetagli">new potatoes</li>
</ul>
Javascript
$('.venuetagli').each(function(j,li) {
console.log(j,li)
});
You can simple get the li with ul using parent-child selector
$('#sortable1 li').each(function(j,li) {
console.log(j,li)
});
Just for the test and never recommended way, you can get elements having same id using attribute selector.
$('[id=venuetagli]').each(function(j,li) {
console.log(j,li);
});
Id must be assign to a single element in complete page else it will return only one of those element or unexpected result:
Here is demo with class
<ul id="sortable1 venuetags" class="connectedSortable">
<li class="venuetagli">fried</li>
<li class="venuetagli">garlic</li>
<li class="venuetagli">rosemary</li>
<li class="venuetagli">new potatoes</li>
</ul>
and jQuery:
$('.venuetagli').each(function(j,li) {
console.log(j,li)
})
I have a list:
<ul id="list">
<li class="one">Item A</li>
<li class="one">Item B</li>
<li class="two">Item C</li>
<div id="pressed">Submit</div>
</ul>
and when "Submit" is pressed I want to retrieve the value of the list item which has a class of "two". In this instance, pressed Submit would return "Item C". Here's the jQuery I've tried:
$("#pressed").click(function() {
var v = $('#list').filter('.two').val();
alert(v);
});
But all this returns is 0. What's the best way to do this? Only one <li> will have a class of "two" at any one time.
Firstly, your HTML is invalid as div elements cannot be children of ul:
<ul id="list">
<li class="one">Item A</li>
<li class="one">Item B</li>
<li class="two">Item C</li>
</ul>
<div id="pressed">Submit</div>
Secondly, text() is the property you want, not val():
$("#pressed").click(function() {
var v = $('#list').find('.two').text();
alert(v);
});
Example fiddle
You need html() or text() instead of val(). The function val() is used for input elements like text, checkbox etc. Also put div outside ul to make your html valid as Rory McCrossan pointed
Live Demo
var v = $('#list').filter('.two').html();
After Rory McCrossan's correction with HTML you can do this.
$("#pressed").click(function() {
alert($('#list .two').text());
});
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".