How can I select all parent elements that have one specific class?
For example:
<ul class="123">
<li>
<li>
<ul class="qwe">
<li>
<li>
<ul class="123">
<li class="select">
<li>
</ul>
</ul>
</ul>
How can I select all parent ul elements according to the li with class 'select' that have class '123'?
Is this what you're looking for?
$('.select').parents('.123');
Or maybe the more specific:
$('li.select').parents('ul.123');
How about an alternative using the has() method:
$("ul.123").has("li.select")
http://jsfiddle.net/6wB49/
has()
Description: Reduce the set of matched elements to those that have a
descendant that matches the selector or DOM element.
jquery-class-selectors
$('ul[class="123"] li.select');
//Or
$('li.select').parents('ul.123');
Hi,
You can also try this....
<head runat="server">
<title></title>
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('ul').bind('click', function () {
$(this).parent().each(function () {
alert($(this).attr('title'));
});
});
$('li').bind('onclick', function () {
$(this).parent().each(function () {
alert($(this).html());
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div title="div">
<ul class="123" title="1111_1">
<li title="test_1">Test 1</li>
<li title="test_2">Test 2</li>
<ul class="qwe" title="qwe">
<li title="qwe_1">ABC 1</li>
<li title="qwe_2">ABC 2</li>
<ul class="123" title="123">
<li class="select" title="123_1">XYZ 1</li>
<li title="123_2">XYZ 2</li>
</ul>
</ul>
</ul>
</div>
</form>
</body>
</html>
Thank you,
Vishal Patel
Related
I'm trying to build a mega menu in Shopify, this is what I have in my HTML:
$('.has-child').on('click', function(event) {
event.preventDefault();
$(this).find('.child').toggleClass('menu-visible');
$('.child').click(function(e) {
e.stopPropagation();
});
});
.menu-visible{
color:red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="parent">
<li class="parent-main has-child">Shop
<ul class="child">
<li class="">All Collections</li>
</ul>
</li>
<li class="parent-main has-child">About
<ul class="child">
<li class="">Child link</li>
<li class="">Child link</li>
</ul>
</li>
</ul>
It's working as long as I'm clicking to open and close the same parent menu but the issue I'm having is once I click on one parent menu item and then click on another parent menu item it will open the second menu on the first (so if I click on "Shop" and then click "About" it will open the "About" menu on top of the "Shop" menu). I know I need to get it to remove the "menu-visible" class once I click another parent link but I just don't know how... I tried something with .siblings() but it didn't work, maybe I used it wrong...
Any ideas?
-Thanks.
Basically what you need is to add the display none to all the other children and toggle the one that you are clicking, by using the not() function you can achieve this without an if statement
<!DOCTYPE html>
<html>
<head>
<title>List</title>
<meta charset="utf-8">
<style type="text/css">
.d-none{
display: none;
}
</style>
</head>
<body>
<ul class="parent">
<li class="parent-main has-child">Shop
<ul class="child d-none">
<li class="">All Collections</li>
</ul>
</li>
<li class="parent-main has-child">About
<ul class="child d-none">
<li class="">Child link</li>
<li class="">Child link</li>
</ul>
</li>
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.parent-main a').click(function(e){
e.preventDefault();
$('.child').not($(this).parent().find('.child')).addClass('d-none');
$(this).parent().find('.child').toggleClass('d-none');
})
});
</script>
</body>
</html>
$('.has-child').on('click', function(event) {
event.preventDefault();
$(event.currentTarget)
.find('.child')
.toggleClass('menu-visible')
.parent()
.siblings()
.find('.child')
.removeClass('menu-visible')
$('.child').click(function(e) {
e.stopPropagation();
});
});
Simply first remove class from all elements then re-apply on just wanted one.
use if ($(this).find('.child').hasClass("menu-visible")) { in order to toggle and remove from others in same time
$('.has-child').on('click', function(event) {
event.preventDefault();
if ($(this).find('.child').hasClass("menu-visible")) {
$('.child').removeClass("menu-visible")
$(this).find('.child').removeClass('menu-visible');
} else {
$('.child').removeClass("menu-visible")
$(this).find('.child').addClass('menu-visible');
}
$('.child').click(function(e) {
e.stopPropagation();
});
});
.menu-visible {
display: block !important;
}
.child {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="parent">
<li class="parent-main has-child">Shop
<ul class="child">
<li class="">All Collections</li>
</ul>
</li>
<li class="parent-main has-child">About
<ul class="child">
<li class="">Child link</li>
<li class="">Child link</li>
</ul>
</li>
</ul>
This one should solve your problem.
$('.has-child').on('click tap', function(event) {
event.preventDefault();
if ($(this).find('.child').hasClass('menu-visible')) {
$(this).find('.child').removeClass('menu-visible'); // toggle current
} else {
$('.menu-visible').removeClass('menu-visible'); // close all
$(this).find('.child').addClass('menu-visible'); // open current
}
});
I have an HTML file like this:
JS:
function functionName(event) {
event.stopPropagation();
var item = event.data.param;
document.getElementById("list").innerHTML = item;
}
$(document).ready(function() {
$("li").each(function() {
$(this).on('click', {param: this.id}, functionName);
});
});
HTML:
<div id="main">
<div id="tree">
<ul class="xyz">
<li class="hide">AVC</li>
<li class="hide">Anna</li>
<li class="hide">Peter</li>
<li id="foo1">Gary
<ul class="xyz">
<li class="hide">John</li>
<li class="hide">Anna</li>
<li id="foo2">Briton
<ul class="xyz">
<li class="hide">gg</li>
<li class="hide">hh</li>
<li id="foo3">Layla
<ul class="xyz">
<li class="hide">gg</li>
<li class="hide">hh</li>
<li id="foo4">Undertaker
<ul class="xyz">
<li class="hide">gg</li>
<li class="hide">hh</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div id="list"></div>
</div>
I have two div tags whose id is receptively tree and list. Tree div contains the nested ul li tags and each li have unique id.
I want to show the first level children of a ul li tag. For example, when I am clicking on Gary, it should show the first level children ( John, Anna, Britton) in right div i.e. list.
Right now I am able to get the id of ul li element in list div when clicking any item.
How can I traverse the first level children of clicking element using jquery/javascript and display them in list div?
Thanks
Try using find() ,> ul selects the direct descendant
$('li[id^="foo"]').click(function(e){
e.stopPropagation();
var x = $(this).last().find(' > ul').clone().find('ul').remove().end();
console.log(x[0])
$('#list').html(x);
$('#list .hide').show();
});
simple demo : https://jsfiddle.net/sk30mwud/4/
'$('#tree').on('click', 'li', function(){
$(this).find('> ul > li').toggleClass('hide');
return false;
})'
Can you please take a look at this approach:
It uses .contents().get(0).nodeValue to fetch the text present in child li nodes and not from its childerns if any.
function functionName(event) {
event.stopPropagation();
var item = event.data.param;
var names = [];
$("#" + item).children("ul").children("li").each(function() {
names.push($(this).contents().get(0).nodeValue);
});
$("#list").text(names.join(","));;
}
$(document).ready(function() {
$("li").each(function() {
$(this).on('click', {
param: this.id
}, functionName);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="main">
<div id="tree">
<ul class="xyz">
<li class="hide">AVC</li>
<li class="hide">Anna</li>
<li class="hide">Peter</li>
<li id="foo1">Gary
<ul class="xyz">
<li class="hide">John</li>
<li class="hide">Anna</li>
<li id="foo2">Briton
<ul class="xyz">
<li class="hide">gg</li>
<li class="hide">hh</li>
<li id="foo3">Layla
<ul class="xyz">
<li class="hide">gg</li>
<li class="hide">hh</li>
<li id="foo4">Undertaker
<ul class="xyz">
<li class="hide">gg</li>
<li class="hide">hh</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div id="list"></div>
</div>
I have a menu with li elements, after click on the one of the elements I like to run a function click and display alert with an id of li element.
JS
<script type="text/javascript">
$("#mainmenu li").click(function() {
alert(this.id);
});
</script>
HTML
<div id="menu1">
<ul id="mainmenu">
<li>Choose the first map <i class="arrow"></i>
<ul>
<li>Category 1<i class="arrow"></i>
<ul>
<li class="div1clear" id="firstIDtoDisplay" data-path="contents/work/cycling1.html">% of employees cycling to work</li>
</ul>
</li>
<li>Ethnic maps<i class="arrow"></i>
<ul>
<li class="div1clear" id="secoundIDtoDisplay" data-path="contents/ethnic/white_british1.html">% of White British residents</li>
<li class="div1clear" id="thirdIDtoDisplay" data-path="contents/ethnic/white_tot1.html">% of White residents</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
$("#mainmenu li").click(function() {
alert(this.id);
});
</script>
<div id="menu1">
<ul id="mainmenu">
<li>Choose the first map <i class="arrow"></i>
<ul>
<li>Category 1<i class="arrow"></i>
<ul>
<li class="div1clear" id="firstIDtoDisplay" data-path="contents/work/cycling1.html">% of employees cycling to work</li>
</ul>
</li>
<li>Ethnic maps<i class="arrow"></i>
<ul>
<li class="div1clear" id="secoundIDtoDisplay" data-path="contents/ethnic/white_british1.html">% of White British residents</li>
<li class="div1clear" id="thirdIDtoDisplay" data-path="contents/ethnic/white_tot1.html">% of White residents</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Unfortunately after click nothing happens. No errors in console as well.
Probably the mistake is in a JS code, do you have an idea what is an issue?
https://jsfiddle.net/pgsf6fot/
$(document).ready(function() {
$("#mainmenu li").click(function() {
alert( $(this).attr('id') );
});
});
You have 3 options here to solve your issue:
1- Put your JS code after the html element you need to bind too.
2- Use document.ready to make the js code execute after all html render.
3- Use On
use on event for dynamic elements
$(document).ready(function(){
$("#mainmenu").on("click","li",function() {
alert(this.id);
});
});
Might just be a matter of timing, the DOM might not be ready when your JS is executed. So you register the click events on elements that does not exists at that time, because they have not yet been rendered.
Try wrapping with a DOM ready listener (http://api.jquery.com/ready/), this will hold the executing of your JS until the DOM has been rendered.
$(function() {
$("#mainmenu li").click(function() {
alert(this.id);
});
})
$(function(){
$("#mainmenu li ul li ul li").click(function() {
alert(this.id);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu1">
<ul id="mainmenu">
<li>Choose the first map <i class="arrow"></i>
<ul>
<li>Category 1<i class="arrow"></i>
<ul>
<li class="div1clear" id="firstIDtoDisplay" data-path="contents/work/cycling1.html">% of employees cycling to work</li>
</ul>
</li>
<li>Ethnic maps<i class="arrow"></i>
<ul>
<li class="div1clear" id="secoundIDtoDisplay" data-path="contents/ethnic/white_british1.html">% of White British residents</li>
<li class="div1clear" id="thirdIDtoDisplay" data-path="contents/ethnic/white_tot1.html">% of White residents</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Specify the id attribute of the click li using $(this), and return false to cancel any propagation and the default behaviour of li
<script type="text/javascript">
$("#mainmenu li").click(function(e) {
alert($(this).attr('id'));
return false;
});
</script>
Demo: http://jsfiddle.net/ptx2hwy3/
I want to sort a list with items. The sorting should be based on the data-element of each item.
The strange thing is, it works if you try it locally on your pc (download my sortingtest.html), but it doesn't work online in jfiddle, neither and more importantly on mobile phones!
Do you have an idea whats wrong with my code or how I could do it better so that it works also on mobile phones?
The Code:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
function sortEntries() {
var elems = $('#mylist').children('li').remove();
elems.sort(function(a,b){
return parseInt($(b).data('vote')) > parseInt($(a).data('vote'));
});
$('#mylist').append(elems);
}
</script>
</head>
<body>
<ul id="mylist">
<li data-vote="2">Vote: 2</li>
<li data-vote="4">Vote: 4</li>
<li data-vote="1">Vote: 1</li>
<li data-vote="5">Vote: 5</li>
<li data-vote="3">Vote: 3</li>
</ul>
Sort me!
</body>
</html>
JFiddle:
http://jsfiddle.net/Q82Qu/
HTML-File Download: (Save file as)
https://copy.com/c0Ogb8wLtRrg
Big thanks in advance,
Stee
var elems = $('#mylist').children('li').remove();
what above code do is remove DOM from the Document so you can not use it as elems.sort(
<html>
<head>
<script src="js/jquery.js"></script>
<script>
function sortEntries()
{
var elems = $('#mylist').children('li');
elems.sort(function(a,b){
return parseInt($(b).data('vote')) > parseInt($(a).data('vote'));
});
$('#mylist').append(elems);
}
</script>
</head>
<body>
<ul id="mylist">
<li data-vote="2">Vote: 2</li>
<li data-vote="4">Vote: 4</li>
<li data-vote="1">Vote: 1</li>
<li data-vote="5">Vote: 5</li>
<li data-vote="3">Vote: 3</li>
</ul>
Sort me!
</body>
</html>
I've sorted it out on my own:
The key is to use this sorting code:
elems.sort(function(a,b){
return $(b).attr('data-vote') - $(a).attr('data-vote');
});
I'm having a list of products displayed. Once the show more is clicked the text within the extras class needs to be displayed, the show more needs to be hidden and show less needs to be visible. The opposite needs to happen when show less is clicked.
I used the below jQuery code and it works but the problem is that it shows/hide add the extra text in every block. I want it to show only the relevant block.
Javascript
$(document).ready(function() {
$('.extras').css("display", "none");
$('.showmore').click(function() {
$(".extras").toggle();
$('.showmore').hide();
$('.less').show();
});
$('.less').click(function() {
$(".extras").toggle();
$('.extras').hide();
$('.showmore').show()
});
});
HTML
<div class="blocks">
<div class="right">
<ul class="options">
<li class="x">Service 1</li>
<li class="y">Service 2</li>
<li class="z">Service 3</li>
<li class="r">Service 4</li>
<li class="k">Service 5</li>
</ul>
<div class="showmore"><a>+ show more</a></div>
</div>
<div class="extras">
<p>test text</p>
<div class="less"><a>- hide</a></div>
</div>
</div>
<div class="blocks">
<div class="right">
<ul class="options">
<li class="x">Service 1</li>
<li class="y">Service 2</li>
<li class="z">Service 3</li>
<li class="r">Service 4</li>
<li class="k">Service 5</li>
</ul>
<div class="showmore"><a>+ show more</a></div>
</div>
<div class="extras">
<p>test text</p>
<div class="less"><a>- hide</a></div>
</div>
</div>
<div class="blocks">
<div class="right">
<ul class="options">
<li class="x">Service 1</li>
<li class="y">Service 2</li>
<li class="z">Service 3</li>
<li class="r">Service 4</li>
<li class="k">Service 5</li>
</ul>
<div class="showmore"><a>+ show more</a></div>
</div>
<div class="extras">
<p>test text</p>
<div class="less"><a>- hide</a></div>
</div>
</div>
Any help will be appreciated.
Make sure you do your logic in relevant sections. Demo Here
Try:
$(document).ready(function () {
$('.extras').css("display","none");
$('.showmore').click(function () {
var parent = $(this).closest('.blocks');
$(parent).find(".extras").toggle();
$(parent).find('.less').show();
$(this).hide();
});
$('.less').click(function () {
var parent = $(this).closest('.blocks');
$(parent).find(".extras").toggle();
$(parent).find('.showmore').show();
$(this).hide();
});
});
Use .closest()
$(document).ready(function() {
$('.extras').css("display", "none");
$('.showmore').click(function() {
var $div = $(this).closest('.blocks');
$div.find(".extras").toggle();
$div.find('.showmore').hide();
$div.find('.less').show();
});
$('.less').click(function() {
var $div = $(this).closest('.blocks');
$div.find(".extras").toggle();
$div.find(".extras").hide();
$div.find('.showmore').show();
});
});
Check Fiddle
try using $(this).toggle() in the event handler.
Or I guess more completely, $('.extras').hide(); $(this).show();
Use the $(this) to get the relevant content,
so inside the $(".showmore").click(),
$(this).parents(".blocks").children(".extras").toggle();
$(this).parents(".blocks").children('.showmore').hide();
$(this).parents(".blocks").children('.less').show();
Test Link
You can combine closest, find and toggle to work.
So all your javascript can be changed to the following.
$('.showmore, .less').click(function() {
var $elements = $(this).closest('.blocks').find('.extras, .showmore');
$elements.toggle();
});
demo
References
Closest
Find
Toggle