selector for get all the first child with classname x - javascript

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>

Related

Add class to ancestor element based on existence of element in the hierarchy

I have a sample code below
<li class="treeview">
<a href="#"><i class="fa fa-link"></i> <span>Multilevel</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li class="active">Link in level 2</li>
<li>Link in level 2</li>
</ul>
</li>
If one of the li has a class active how can I also add a class active on the parent li or this part
<li class="treeview">

You can use jquery to achieve this. Please find the snippet below.
$('.treeview-menu li').on('click', function() {
$(this).addClass('active');
$(this).closest('li.treeview').addClass('active');
})
.active>a {
color: green;
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<ul>
<li class="treeview">
<a href="#"><i class="fa fa-link"></i> <span>Multilevel</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li class="">Link in level 2</li>
<li>Link in level 2</li>
</ul>
</li>
</ul>

If you need the entire treeview ancestry of an active <li> to have the class .active, you can use jQuery's :has:
$('.treeview:has(li.active)').addClass('active');
$('.treeview:has(li.active)').addClass('active');
.active::before {content: 'Active - '}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="treeview">1
<ul>
<li class="treeview">2
<ul>
<li class="treeview">3
<ul>
<li class="active">4</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="treeview">1
<ul>
<li class="treeview">2
<ul>
<li class="treeview">3
<ul>
<li>4</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="treeview">1
<ul>
<li class="treeview">2
<ul>
<li class="treeview">3
<ul>
<li>4</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
If you need only the immediately closest treeview, you can use .closest():
$('.treeview li.active').closest(".treeview").addClass('active');
$('.treeview li.active').closest(".treeview").addClass('active');
.active::before {content: 'Active - '}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="treeview">1
<ul>
<li class="treeview">2
<ul>
<li class="treeview">3
<ul>
<li class="active">4 (Active)</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="treeview">1
<ul>
<li class="treeview">2
<ul>
<li class="treeview">3
<ul>
<li>4</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="treeview">1
<ul>
<li class="treeview">2
<ul>
<li class="treeview">3
<ul>
<li>4</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>

You don't want to select any li.active outside of the .treeview tree hierarchy:
$('.treeview li.active').closest('.treeview').addClass('active');

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.

Javascript Select Children of Children?

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 ;)

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