Javascript Select Children of Children? - javascript

Is there any way in Javascript not in jQuery to select the children of a children node ?
For Example i want to select the <LI> where the offset parent is.
<li class="all_leagues"> ?
Example:
<li class="top_leagues">
<h5>Top Ligen</h5>
<ul class="games first">
<ul class="games">
<ul class="games">
</li>
<li class="all_leagues">
<h5>Alle Ligen</h5>
<ul class="games first">
<li id="lg_chk_br_1_l_15231" class="league_check ">
<li id="lg_chk_br_1_l_15175" class="league_check ">
<li id="lg_chk_br_1_l_12214" class="league_check ">
</ul>
<ul class="games">
<li id="lg_chk_br_1_l_16106" class="league_check ">
<li id="lg_chk_br_1_l_13939" class="league_check ">
<li id="lg_chk_br_1_l_16419" class="league_check ">
</ul>
<ul class="games">
<li id="lg_chk_br_1_l_14823" class="league_check ">
<li id="lg_chk_br_1_l_11940" class="league_check ">
</ul>
</li>
and ho could i select the id's from the returned node list ?
Actually i get li#lg_chk_br_1_l_14481.league_check


You can use Document.querySelectorAll()
document.querySelectorAll('.all_leagues > ul > li')
Note: Browser compatibility(for the above IE8+ should work)
Or
var list = document.querySelectorAll('.all_leagues .league_check');
for (var i = 0, len = list.length; i < len; i++) {
console.log(list[i].id)
}
<ul>
<li class="top_leagues">
<h5>Top Ligen</h5>
<ul class="games first"></ul>
<ul class="games"></ul>
<ul class="games"></ul>
</li>
<li class="all_leagues">
<h5>Alle Ligen</h5>
<ul class="games first">
<li id="lg_chk_br_1_l_15231" class="league_check "></li>
<li id="lg_chk_br_1_l_15175" class="league_check "></li>
<li id="lg_chk_br_1_l_12214" class="league_check "></li>
</ul>
<ul class="games">
<li id="lg_chk_br_1_l_16106" class="league_check "></li>
<li id="lg_chk_br_1_l_13939" class="league_check "></li>
<li id="lg_chk_br_1_l_16419" class="league_check "></li>
</ul>
<ul class="games">
<li id="lg_chk_br_1_l_14823" class="league_check "></li>
<li id="lg_chk_br_1_l_11940" class="league_check "></li>
</ul>
</li>
</ul>


ok i fixed it ;)
Forgot that
var list = document.getElementsByClassName("all_leagues") returns an Array so the right selector is
var list = document.getElementsByClassName("all_leagues")[0];
full code:
var list = document.getElementsByClassName("all_leagues")[0];
list.getElementsByClassName("league_check ");
thx anyways ;)

Related

selector for get all the first child with classname x

I have this html structure
<ul class="container">
<li class="rock"></li>
<li class="paper"></li>
</ul>
<ul class="container">
<li class="rock"></li>
<li class="paper"></li>
</ul>
<ul class="container">
<li class="paper"></li>
<li class="rock"></li>
</ul>
<ul class="container">
<li class="rock"></li>
<li class="paper"></li>
</ul>
<ul class="container">
<li class="paper"></li>
<li class="rock"></li>
</ul>
I want to get from the element with class container, all the first-child with class paper.
I tried
let selected=document.querySelectorAll(".container:first-child.paper");
but was wrong.
How I get the correct query selector?

Your selector is not correct to target the elements you are looking for.
Try
let selected = document.querySelectorAll(".container .paper:first-child");
Demo:
let selected = document.querySelectorAll(".container .paper:first-child");
console.log(selected);
<ul class="container">
<li class="rock"></li>
<li class="paper"></li>
</ul>
<ul class="container">
<li class="rock"></li>
<li class="paper"></li>
</ul>
<ul class="container">
<li class="paper">1234</li>
<li class="rock"></li>
</ul>
<ul class="container">
<li class="rock"></li>
<li class="paper"></li>
</ul>
<ul class="container">
<li class="paper">ABCD</li>
<li class="rock"></li>
</ul>

let selected= document.querySelectorAll(".container .paper:first-child");
selected.forEach(e => e.textContent = 'First Paper');
<ul class="container">
<li class="rock"></li>
<li class="paper"></li>
</ul>
<ul class="container">
<li class="rock"></li>
<li class="paper"></li>
</ul>
<ul class="container">
<li class="paper"></li>
<li class="rock"></li>
</ul>
<ul class="container">
<li class="rock"></li>
<li class="paper"></li>
</ul>
<ul class="container">
<li class="paper"></li>
<li class="rock"></li>
</ul>

jQuery switching lists with same class

I created a bit complex list and I wish after clicking on element with class ".recipes", display it inside paragraph but after clicking on button prev or next, I wish to switch to previous or next element with same class name. I know already how to switch the list if they are next to each other but after putting them inside different parents it seems more complicated:
<div>
<button class="prev">prev</button>
<button class="next">next</button>
<p class="showRecipies"></p>
<ul class="listOfRecipies">
<li>
<ul class="particularRecipie">
<li class="timeOfPreparation">3:20</li>
<li class="recipies">Drinks</li>
</ul>
</li>
<li>
<ul class="particularRecipie">
<li class="timeOfPreparation">3:20</li>
<li class="recipies">Vegetables</li>
</ul>
</li>
<li>
<ul class="particularRecipie">
<li class="timeOfPreparation">3:20</li>
<li class="recipies">Meat</li>
</ul>
</li>
<li>
<ul class="particularRecipie">
<li class="timeOfPreparation">3:20</li>
<li class="recipies">Fruits</li>
</ul>
</li>
<li>
<ul class="particularRecipie">
<li class="timeOfPreparation">3:20</li>
<li class="recipies">Others</li>
</ul>
</li>
</ul>
</div>
To show clicked element:
$(".recipies").on("click", function() {
$(".recipies.active").add($(this)).toggleClass("active");
var recipieValue = $(this).text();
var showRecipies = document.querySelector(".showRecipies");
showRecipies.innerHTML = recipieValue;
});
and to show previous element with class "recipes" I got from another person on this forum is here however because classes have different parents now, it doesn't work, I thought that i can add more parents() and because of that find previous or next ".recipes" but it didn't work out:
$(".prev").click(function() {
var isFirst = $(".recipies.active").is(":first-child");
if(isFirst){
$(this).parent().find(".recipies:last").trigger("click");
} else {
$(".recipies.active").prev().trigger("click");
}
});

Check this out:
$(".recipies").on("click", function() {
$(".recipies.active").add($(this)).toggleClass("active");
var recipieValue = $(this).text();
var showRecipies = document.querySelector(".showRecipies");
showRecipies.innerHTML = recipieValue;
});
$(".prev").click(function() {
var isFirst = $(".recipies.active").text() == $($(".recipies").get(0)).text();
if (isFirst) {
$(this).parent().find(".recipies:last").trigger("click");
} else {
$(".recipies.active").parent().parent().prev().find(".recipies").trigger("click");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<button class="prev">prev</button>
<button class="next">next</button>
<p class="showRecipies"></p>
<ul class="listOfRecipies">
<li>
<ul class="particularRecipie">
<li class="timeOfPreparation">3:20</li>
<li class="recipies">Drinks</li>
</ul>
</li>
<li>
<ul class="particularRecipie">
<li class="timeOfPreparation">3:20</li>
<li class="recipies">Vegetables</li>
</ul>
</li>
<li>
<ul class="particularRecipie">
<li class="timeOfPreparation">3:20</li>
<li class="recipies">Meat</li>
</ul>
</li>
<li>
<ul class="particularRecipie">
<li class="timeOfPreparation">3:20</li>
<li class="recipies">Fruits</li>
</ul>
</li>
<li>
<ul class="particularRecipie">
<li class="timeOfPreparation">3:20</li>
<li class="recipies">Others</li>
</ul>
</li>
</ul>
</div>

Dropdown menu with hover/mouseover event in jQuery

I was trying to make and hover dropdown menu but I cant, well not really, I can make that the menu toggle just the specific items, with my code show all the items available:
Code here:
$(document).on('ready', function(){
var timeout = 0;
$('.nav').hover(function(){
$('.dropdown-menu').slideDown('fast');
},function(){
timeout = setTimeout(hideMenu,300);
});
$(".dropdown-menu").hover(function(){
clearTimeout(timeout);
},function(){
hideMenu();
});
});
function hideMenu(){
$(".dropdown-menu").slideUp('fast');
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-static-top navbar-default">
<div class="container">
<div id="cls">
<div class="navbar-header center">
<div class="navbar-header">
<img class="logo" src="paruno_logo.png">
<ul id="main-menu" class="nav navbar-nav ref">
<li class="dropdown dropdown-large option">
<a id="drop-to" href="/femenino/calzado" class="dropdown-toggle firstTextOption" data-toggle="dropdown">GIRL</a>
<ul class="dropdown-menu dropdown-menu-large row change-f">
<li class="n-smasd">
<ul>
<li class="dropdown-header title">Zapatos</li>
</ul>
<ul>
<li class="dropdown-header title">Botines</li>
</ul>
<ul>
<li class="dropdown-header title">Botas</li>
</ul>
<ul>
<li class="dropdown-header title">Sandalias</li>
</ul>
<ul>
<li class="dropdown-header title">Tenis</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown dropdown-large option hidden-sm hidden-xs">|</li>
<li class="dropdown dropdown-large option">
<a id="drop-to" href="/masculino/calzado" class="dropdown-toggle firstTextOption" data-toggle="dropdown">HUMMIE</a>
<ul class="dropdown-menu dropdown-menu-large row change-f">
<li class="col-sm-3 option-sm">
<ul>
<li class="dropdown-header title">Casuales</li>
</ul>
<ul>
<li class="dropdown-header title">Mocasines</li>
</ul>
</li>
<li class="col-sm-3 option-sm">
<ul>
<li class="dropdown-header title">Botas</li>
</ul>
<ul>
<li class="dropdown-header title">Tenis</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown dropdown-large option hidden-sm hidden-xs">|</li>
<li class="dropdown dropdown-large option">
<a id="drop-to" href="#" class="dropdown-toggle firstTextOption" data-toggle="dropdown">SOULCREATION</a>
<ul class="dropdown-menu dropdown-menu-large row change-f">
<li class="col-sm-3 option-sm">
<ul>
<li class="dropdown-header title">ANGER</li>
</ul>
</li>
<li class="col-sm-3 option-sm">
<ul>
<li class="dropdown-header title">SOUL</li>
</ul>
</li>
<li class="col-sm-3 option-sm">
<ul>
<li class="dropdown-header title">URBAN</li>
</ul>
</li>
<li class="col-sm-3 option-sm">
<ul>
<li class="dropdown-header title">ART</li>
</ul>
</li>
<li class="col-sm-3 option-sm">
<ul>
<li class="dropdown-header title">ALAN ARROUND THE MUNDO</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown dropdown-large option hidden-sm hidden-xs">|</li>
<li class="dropdown dropdown-large option">
<a id="drop-to" href="/femenino/calzado" class="dropdown-toggle firstTextOption"> MAGNIFICIENT </a>
</li>
</ul>
</div>
<!-- /MB -->
</div>
</div>
</div>
To give more information, I use Bootstrap to make a responsive navbar and I don't want to use the Javascript from Bootstrap beacuse I want to get a pure Javascript.

Ok, don't know what do you mean by pure js when you using Jquery and bootstrap (which is using Jquery as well). But add that function to your code
$(document).on('mouseover','.dropdown-toggle',function(e){
$(this).parent('li').children('ul').slideDown('fast');
});
This will open dropdown menu. For hiding it you can research more.
Also I noticed that you have several elements with same id="drop-to". Id value should be unique! Name and class can be same on multiple elements.

JQuery - Creating parent grandparent level text as object

I am trying to create previous parent and grandparent level text as object using function
For example on element grandchild11
<a class="level-12" href="#" parobj="['Child1','Child','Grandparent']" other="getOther(this)"> Grandchild11</a>
I am facing issue in creating object for attribute parobj as shown above for every anchor tag and I have even tried adding class with levels but failing to get exact output
is there anyway to get parobj as mentioned above either by hover or clicking anchor tag?
Codepen URL for reference:
http://codepen.io/divyar34/pen/bqMaQY
HTML:
$('a').attr('parObj', 'getParent(this)'); //adding attr parentObject with function to get parent,grandparent details
$('a').attr('other', 'getOther(this)'); //other Info attribute for ajax call
function getParent(val) {
var obj = [val];
obj.push($(val).parent().text());
return obj
}
function getOther(val) {
//just for reference, but originaly using internal api
$.get('otherinfo.html', {
option: val
}, function(data) {
console.log(data);
return data.name
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="level-1">Parent1
<ul class="level-2">
<li class="level-3"><a class="level-4" href="#">Grandparent</a>
<div class="level-4">
<ul class="level-5">
<li class="level-6">
<a class="level-7" href="#">Child</a>
<div class="level-7">
<ul class="level-8">
<li class="level-9"> <a class="level-10" href="#">Child1</a>
<ul class="level-10">
<li class="level-11"><a class="level-12" href="#"> Grandchild11</a></li>
<li class="level-11"><a class="level-12" href="#"> Grandchild11</a></li>
</ul>
</li>
<li class="level-9"> <a class="level-10" href="#">Child2</a>
<ul class="level-10">
<li class="level-11"><a class="level-12" href="#">GrandChild21</a></li>
<li class="level-11"><a class="level-12" href="#">grandchild22</a></li>
</ul>
</li>
</ul>
</div>
</li>
<li class="level-6">
<a class="level-7" href="#"> Child2 </a>
<ul class="level-7">
<li class="level-8"><a class="level-9" href="#">GrandChild21</a></li>
<li class="level-8"><a class="level-9" href="#">grandchild22</a></li>
</ul>
</li>
</ul>
</div>
</li>
</ul>
</div>
<!-- Parent1 -->
<div class="level-1">Parent2
<ul class="level-2">
<li class="level-3"><a class="level-4" href="#">Grandparent</a>
<div class="level-4">
<ul class="level-5">
<li class="level-6">
<a class="level-7" href="#">Child</a>
<div class="level-7">
<ul class="level-8">
<li class="level-7"> <a class="level-8" href="#">Child1</a>
<ul class="level-8">
<li class="level-9"><a class="level-10" href="#"> Grandchild11</a></li>
<li class="level-9"><a class="level-10" href="#"> Grandchild11</a></li>
</ul>
</li>
<li class="level-7"> <a class="level-8" href="#">Child2</a>
<ul class="level-8">
<li class="level-9"><a class="level-10" href="#">GrandChild21</a></li>
<li class="level-9"><a class="level-10" href="#">grandchild22</a></li>
</ul>
</li>
</ul>
</div>
</li>
<li class="level-6">
<a class="level-7" href="#"> Child2 </a>
<ul class="level-7">
<li class="level-8"><a class="level-9" href="#">GrandChild21</a></li>
<li class="level-8"><a class="level-9" href="#">grandchild22</a></li>
</ul>
</li>
</ul>
</div>
</li>
</ul>
</div>
<!-- Parent2 -->

Make ul-li navigation dynamically

I have following html:
<div id="nav">
<ul>
<li class="keyitem">keyitem 1</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li class="keyitem">keyitem 2</li>
<li>item</li>
<li>item</li>
<li class="keyitem"></li>
<li>item</li>
<li>item</li>
</ul>
</div>
But i want to make the above like following:
<div id="nav">
<ul>
<li class="keyitem">one
<ul>
<li class="child_one">item</li>
<li class="child_one">item</li>
<li class="child_one">item</li>
</ul>
</li>
<li class="keyitem">two
<ul>
<li class="child_two">item</li>
<li class="child_two">item</li>
</ul>
</li>
<li class="keyitem">three
<ul>
<li class="child_three">item</li>
<li class="child_three">item</li>
</ul>
</li>
</ul>
</div>
Not possible to change the first snippet of code structure. I have to make the first snippet like second snippet and replace with the first one.
please help.
Thanks in advance..

var childClasses = ['child_one', 'child_two', 'child_three' /* more here */];
$('#nav li.keyitem').each(function(i) {
var $li = $(this),
$sub = $li.nextUntil('li.keyitem').addClass(childClasses[i]);
$('<ul />').appendTo($li).append($sub);
});
Will produce:
<div id="nav">
<ul>
<li class="keyitem">keyitem 1
<ul>
<li class="child_one">item</li>
<li class="child_one">item</li>
<li class="child_one">item</li>
</ul>
</li>
<li class="keyitem">keyitem 2
<ul>
<li class="child_two">item</li>
<li class="child_two">item</li>
</ul>
</li>
<li class="keyitem">keyitem 3
<ul>
<li class="child_three">item</li>
<li class="child_three">item</li>
</ul>
</li>
</ul>
</div>
(demo)

Categories

Resources