How to select just the parent on jquery? - javascript

I want to select only the element li with class options or level in jquery
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div class="root-head">
<ul>
<li class="level" name="name1">main</li>
<li class="level options" name="name2">
sub1
<ul class="option-selector lv1">
<li value="1">option1</li>
<li value="2">option2</li>
<li value="3">option2</li>
<li value="4">option3</li>
<li value="5">option4</li>
<li value="6">option5</li>
</ul>
</li>
<li class="level options betimes" name="name3">
sub2
</li>
<li class="level options betimes" name="name4">
sub3
</li>
</ul>
</div>
How can make the function below called only then I click on sub1 text, not all of the li element like <li value="1">option1</li>
$("li[name=name2]").click(function () {
console.log("Funtion called");
if (/*suplimentary condition*/) {
console.log("Yes is here");
}
});
Maybe is useful the last my question!


You have to stop the event propagation in the child li click event
$(".level").click(function () {
console.log("Funtion called");
});
$(".level ul").click(function (e) {
e.stopPropagation();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div class="root-head">
<ul>
<li class="level" name="name1">main</li>
<li class="level options" name="name2">
sub1
<ul class="option-selector lv1">
<li value="1">option1</li>
<li value="2">option2</li>
<li value="3">option2</li>
<li value="4">option3</li>
<li value="5">option4</li>
<li value="6">option5</li>
</ul>
</li>
<li class="level options betimes" name="name3">
sub2
</li>
<li class="level options betimes" name="name4">
sub3
</li>
</ul>
</div>


You can check if event.target is the same as this.
event.target will be the actually clicked element.
this will be the element the click function is bound too.
According to the jquery docs it's a proper method of detecting event bubbling.
$("li[name=name2]").click(function(e) {
if (e.target === this) {
console.log("sub clicked");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div class="root-head">
<ul>
<li class="level" name="name1">main</li>
<li class="level options" name="name2">
sub1
<ul class="option-selector lv1">
<li value="1">option1</li>
<li value="2">option2</li>
<li value="3">option2</li>
<li value="4">option3</li>
<li value="5">option4</li>
<li value="6">option5</li>
</ul>
</li>
<li class="level options betimes" name="name3">
sub2
</li>
<li class="level options betimes" name="name4">
sub3
</li>
</ul>
</div>


be more specific - give the target some uniqueness in the dom
<li class="level options" name="name2">
<div>sub1</div>
<ul class="option-selector lv1">
<li value="1">option1</li>
<li value="2">option2</li>
<li value="3">option2</li>
<li value="4">option3</li>
<li value="5">option4</li>
<li value="6">option5</li>
</ul>
</li>
$('li[name="name2"] > div').click(function () {
console.log("Funtion called");
if (/*suplimentary condition*/) {
console.log("Yes is here");
}
});

Related

Anyone knows How to Auto Select an option from <Li> Javascript HTML

Here is the element I got from a ebsite
I want to make a script that I can use to auto select a size (Like 12).
<div class="select-size select-size-detail" id="sizeOptions" style="display: block;">
<div></div>
<ul class="select-box-size">
<li currupc="00886737650974">6.5</li>
<li currupc="00886737650981">7</li>
<li currupc="00886737659267">7.5</li>
<li currupc="00886737659274">8</li>
<li currupc="00886737659281">8.5</li>
<li currupc="00886737659304">9</li>
<li currupc="00886737659328">9.5</li>
<li currupc="00886737659335">10</li>
<li currupc="00886737659342">10.5</li>
<li currupc="00886737659359">11</li>
<li currupc="00886737659397">12</li>
</ul>
</div>
</div>

$('li').click(function(){
$('li').each(function(){ $(this).css({'border-style':'none'}); });
$(this).css({'border-style':'solid','border-width':'2px','border-color':'gray'});
alert('Select '+$(this).text() );
});
function click_li_by_value(_value){
$('li').each(function(){
var li_text=$(this).text();
if(li_text==_value){
$(this).click();
}
});
}
click_li_by_value('12'); //or '11' or '10.5'
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="select-size select-size-detail" id="sizeOptions" style="display: block;">
<div>
<ul class="select-box-size">
<li currupc="00886737650974">6.5</li>
<li currupc="00886737650981">7</li>
<li currupc="00886737659267">7.5</li>
<li currupc="00886737659274">8</li>
<li currupc="00886737659281">8.5</li>
<li currupc="00886737659304">9</li>
<li currupc="00886737659328">9.5</li>
<li currupc="00886737659335">10</li>
<li currupc="00886737659342">10.5</li>
<li currupc="00886737659359">11</li>
<li currupc="00886737659397">12</li>
</ul>
</div>
</div>

how to hide child elements child elements in jQuery

I have a menu populating from MySQL table and PHP up to some nested sub levels.
my menu like this:
A
B
C
If click on A first time it is showing all the child elements and again I click child elements of A it displaying child elements also fine.
But the problem is when I click on the B after open all the levels items of A it shows B sub elements fine. But again if I click A it showing all the elements except child child elements also.
I used jQuery for this.
So I want to bring back to the original state? ( only expand the top child elements, not the sub child elements ),
how to do that?
//this is my jquery code for elements clickable in menu.
$(document).ready(function() {
$(".lichild").parent().hide();
$(".limain").click(function() {
$(this).children('ul').show();
$(this).siblings(".limain").children('ul').hide();
});
$(".lichild").click(function() {
$(this).children('ul').show();
$(this).siblings().children('ul').hide()
});
});
<!-- This is the html I am generating using a PHP function -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="limain">A
<ul>
<li class="lichild">A1
<ul>
<li class="lichild">a2</li>
<li class="lichild">a1
<ul>
<li class="lichild">aaaaaa</li>
<li class="lichild">abbbbbb</li>
</ul>
</li>
</ul>
</li>
<li class="lichild">A2</li>
<li class="lichild">A3</li>
<li class="lichild">A4</li>
<li class="lichild">A5</li>
</ul>
<li class="limain">B
<ul>
<li class="lichild">B1</li>
<li class="lichild">B2</li>
</ul>
</li>
<li class="limain">C
<ul>
<li class="lichild">C1</li>
<li class="lichild">C2</li>
<li class="lichild">C3</li>
<li class="lichild">A6
<ul>
<li class="lichild">A8
<ul>
<li class="lichild">A10
<ul>
<li class="lichild">A13
</li>
<li class="lichild">A14
</li>
</ul>
</li>
<li class="lichild">A11
</li>
</ul>
</li>
<li class="lichild">A9
</li>
</ul>
</li>
<li class="lichild">A7
</li>
</ul>
</li>
<li class="limain">D
<ul>
<li class="lichild">D1</li>
<li class="lichild">D2
</li>
</ul>
</li>
</ul>

Use find inside siblings and hide it.
$(".lichild").parent().hide();
$(".limain").click(function() {
$(this).children('ul').show();
$(this).siblings(".limain").find('ul').hide(); // Change in this line
});
$(".lichild").click(function() {
$(this).children('ul').show();
$(this).siblings().children('ul').hide()
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul>
<li class="limain">
A
<ul>
<li class="lichild">
A1
<ul>
<li class="lichild">a2</li>
<li class="lichild">
a1
<ul>
<li class="lichild">aaaaaa</li <li class="lichild">abbbbbb</li>
</ul>
</li>
</ul>
</li>
<li class="lichild">A2</li>
<li class="lichild">A3</li>
<li class="lichild">A4</li>
<li class="lichild">A5</li>
</ul>
<li class="limain">
B
<ul>
<li class="lichild">B1</li>
<li class="lichild">B2</li>
</ul>
</li>
<li class="limain">
C
<ul>
<li class="lichild">C1</li>
<li class="lichild">C2</li>
<li class="lichild">C3</li>
<li class="lichild">
A6
<ul>
<li class="lichild">
A8
<ul>
<li class="lichild">
A10
<ul>
<li class="lichild">A13
</li>
<li class="lichild">A14
</li>
</ul>
</li>
<li class="lichild">A11
</li>
</ul>
</li>
<li class="lichild">A9
</li>
</ul>
</li>
<li class="lichild">A7
</li>
</ul>
</li>
<li class="limain">
D
<ul>
<li class="lichild">D1</li>
<li class="lichild">D2
</li>
</ul>
</li>
</ul>

$(document).ready(function () {
$(".lichild").parent().hide();
$(".limain").click(function () {
$(this).children('ul').show();
$(this).siblings().find('ul').hide();
});
$(".lichild").click(function () {
$(this).children('ul').show();
$(this).siblings('li').find('ul').hide()
});
});

Slide down in each list

I need ul.list-group-subshould display none on first glance and when I click on "Click" (.dd), only one "list-group-sub" should display block from current li while "list-group-sub" should display none from other li and vice versa, only one is one "list-group-sub" open at a time
Fiddle Demo :
https://fiddle.jshell.net/alpeshlahad/zv3vpzew/3/
$(".list-group-item .dd").click(function() {
$("ul.list-group-sub").slideToggle();
});
ul.list-group-sub {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-group member-list trainers-data ot-box">
<li class="list-group-item">
List 1
<span class="label">
Click
</span>
<ul class="list-group-sub">
<li class="list-group-item checked">Sublist 1</li>
<li class="list-group-item checked">Sublist 2</li>
<li class="list-group-item checked">Sublist 3</li>
</ul>
</li>
<li class="list-group-item">
List 2
<span class="label">
Click
</span>
<ul class="list-group-sub">
<li class="list-group-item checked">Sublist 1</li>
<li class="list-group-item checked">Sublist 2</li>
<li class="list-group-item checked">Sublist 3</li>
</ul>
</li>
</ul>

The issue is because your ul.list-group-sub selector is calling slideToggle() on all elements. You instead need to traverse the DOM to find the one related to the clicked .dd element. To do that you can use closest() to get the parent li, then find() to get the element you need.
To only display one menu at at time you also need to call slideUp() on them whilst toggling the target one. Try this:
$(".list-group-item .dd").click(function(e) {
e.preventDefault();
var $target = $(this).closest('li').find("ul.list-group-sub").slideToggle();
$('ul.list-group-sub').not($target).slideUp();
});
ul.list-group-sub { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-group member-list trainers-data ot-box">
<li class="list-group-item">
List 1
<span class="label">
Click
</span>
<ul class="list-group-sub">
<li class="list-group-item checked">Sublist 1</li>
<li class="list-group-item checked">Sublist 2</li>
<li class="list-group-item checked">Sublist 3</li>
</ul>
</li>
<li class="list-group-item">
List 2
<span class="label">
Click
</span>
<ul class="list-group-sub">
<li class="list-group-item checked">Sublist 1</li>
<li class="list-group-item checked">Sublist 2</li>
<li class="list-group-item checked">Sublist 3</li>
</ul>
</li>
</ul>
Also note that I removed the use of javascript; in the href attribute of your a elements. You can instead call preventDefault() on the event to stop the default behaviour. This method has the benefit of de-coupling the JS logic from the HTML.

$("ul.list-group-sub").slideToggle() targets all sub-items. Use this:
$(this).closest('.list-group-item').find('.list-group-sub').slideToggle();
to target the corresponding list sub-items.
See demo below and updated fiddle here:
$(".list-group-item .dd").click(function() {
$(this).closest('.list-group-item').find('.list-group-sub').slideToggle();
});
ul.list-group-sub {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-group member-list trainers-data ot-box">
<li class="list-group-item">
List 1
<span class="label">
Click
</span>
<ul class="list-group-sub">
<li class="list-group-item checked">Sublist 1</li>
<li class="list-group-item checked">Sublist 2</li>
<li class="list-group-item checked">Sublist 3</li>
</ul>
</li>
<li class="list-group-item">
List 2
<span class="label">
Click
</span>
<ul class="list-group-sub">
<li class="list-group-item checked">Sublist 1</li>
<li class="list-group-item checked">Sublist 2</li>
<li class="list-group-item checked">Sublist 3</li>
</ul>
</li>
</ul>

Pull the active list node item in 2nd position

I have a list of items. I have node id of the 'active' class.
I want to get the active flex node_id and pull the active list item to the center position. I want to match the active_slide node_id with list item class and pull the item to center position.
eg: 233 is 'active_slide'. I want to compare the node_id and pull the list item and pull the item to center position like 69,233,299
jQuery(document).ready(function($){
setTimeout(function(){
var node_id = $('.flex-active-slide .node_id').text();
$('.thumbnailIcon').each(function(index, item){
$('.'+node_id+'li:eq(1)').before($('.thumbnailIcon li:eq(2)'));
});
},1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="parent flex-active-slide">
<div class="node_id"><span>233</span></div>
<ul class="thumbnailIcon">
<li>left</li>
<li class="233">1</li>
<li class="69">2</li>
<li class="299">3</li>
<li>right</li>
</ul>
</li>
<li class="parent">
<div class="node_id"><span>222</span></div>
<ul class="thumbnailIcon">
<li>left</li>
<li class="233">1</li>
<li class="69">2</li>
<li class="299">3</li>
<li>right</li>
</ul>
</li>
<a href="#" class="flex-next">click<a>
<li class="parent">
<div class="node_id"><span>333</span></div>
<ul class="thumbnailIcon">
<li>left</li>
<li class="233">1</li>
<li class="69">2</li>
<li class="299">3</li>
<li>right</li>
</ul>
</li>

You could use the item element you already get from each and then re-order the li by insertAfter:
See a Fiddle here:
jQuery(document).ready(function($){
setTimeout(function(){
var node_id = $('.flex-active-slide .node_id').text();
$('.thumbnailIcon').each(function(index, item){
$(item).find('.'+node_id).insertAfter($(item).find('li:eq(2)'));
});
},1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="parent flex-active-slide">
<div class="node_id"><span>233</span></div>
<ul class="thumbnailIcon">
<li>left</li>
<li class="233">1</li>
<li class="69">2</li>
<li class="299">3</li>
<li>right</li>
</ul>
</li>
<li class="parent">
<div class="node_id"><span>222</span></div>
<ul class="thumbnailIcon">
<li>left</li>
<li class="233">1</li>
<li class="69">2</li>
<li class="299">3</li>
<li>right</li>
</ul>
</li>
<a href="#" class="flex-next">click<a>
<li class="parent">
<div class="node_id"><span>333</span></div>
<ul class="thumbnailIcon">
<li>left</li>
<li class="233">1</li>
<li class="69">2</li>
<li class="299">3</li>
<li>right</li>
</ul>
</li>

Use JavaScript to Wrap Unique Groups of Elements with DIVs

I am using a WordPress plugin that dynamically creates the following list on the fly:
<ul>
<li class="proteins"></li>
<li class="seafood"></li>
<li class="dairy"></li>
<li class="veggies"></li>
<li class="fruit"></li>
<li class="nuts-seeds"></li>
<li class="grains"></li>
<li class="pasta"></li>
<li class="spices"></li>
<li class="herbs"></li>
<li class="technique"></li>
<li class="special"></li>
<li class="servings"></li>
</ul>
I need to wrap specific lis in unique divs like this:
<ul>
<div id="main">
<li class="proteins"></li>
<li class="seafood"></li>
<li class="dairy"></li>
<li class="veggies"></li>
<li class="fruit"></li>
</div>
<div id="carbs">
<li class="nuts-seeds"></li>
<li class="grains"></li>
<li class="pasta"></li>
</div>
<div id="spice">
<li class="spices"></li>
<li class="herbs"></li>
</div>
<div id="other">
<li class="technique"></li>
<li class="special"></li>
<li class="servings"></li>
</div>
</ul>
I've read about using the wrapall() function but I can't find instructions on how to wrap a group of elements that do not have the same class.

Assuming that you take the time to define the relationship between the class-names and the eventual id under which they should appear, and that you use valid HTML, the following plain JavaScript works (albeit I think it could be refined):
var grouped = {
'main' : ['proteins','seafood','dairy','veggies','fruit'],
'carbs' : ['nuts-seeds','grains','pasta'],
'spice' : ['spices','herbs'],
'other' : ['technique','special','servings']
};
function groupBy(el, map) {
var els,
newList = document.createElement('ul'),
newListItem = document.createElement('li'),
tmpList, tmpLI;
for (var key in map) {
if (map.hasOwnProperty(key)){
els = el.querySelectorAll('.' + map[key].join(', .'));
tmpList = newList.cloneNode();
tmpLI = newListItem.cloneNode();
tmpLI.appendChild(tmpList);
tmpLI.id = key;
for (var i = 0, len = els.length; i < len; i++){
tmpList.appendChild(els[i]);
}
el.appendChild(tmpLI);
}
}
}
groupBy(document.querySelector('ul'),grouped);
JS Fiddle demo.
The above function converts:
<ul>
<li class="proteins"></li>
<li class="seafood"></li>
<li class="dairy"></li>
<li class="veggies"></li>
<li class="fruit"></li>
<li class="nuts-seeds"></li>
<li class="grains"></li>
<li class="pasta"></li>
<li class="spices"></li>
<li class="herbs"></li>
<li class="technique"></li>
<li class="special"></li>
<li class="servings"></li>
</ul>
Into:
<ul>
<li id="main">
<ul>
<li class="proteins"></li>
<li class="seafood"></li>
<li class="dairy"></li>
<li class="veggies"></li>
<li class="fruit"></li>
</ul>
</li>
<li id="carbs">
<ul>
<li class="nuts-seeds"></li>
<li class="grains"></li>
<li class="pasta"></li>
</ul>
</li>
<li id="spice">
<ul>
<li class="spices"></li>
<li class="herbs"></li>
</ul>
</li>
<li id="other">
<ul>
<li class="technique"></li>
<li class="special"></li>
<li class="servings"></li>
</ul>
</li>
</ul>

Categories