I have a list in html of this type
<ul>
<li id="1.1" fatherid="1"> ...</li>
<li id="1.2" fatherid="1"> ...</li>
<li id="1.3" fatherid="1"> ...</li>
...
</ul>
And I want to select all the items of the list with a given fatherid. For example I'd like to select all the items with "1" as fatherid, but I don't know how to do it. I tried with querySelectorAll and getElementById but it didn't work, and I prefer not to use jquery.
Thanks for the answers.
You can use data-attributes (https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes) to store the fatherids (which is the recommended way to add custom attributes to html elements). You can then find the tags with a given fatherid using the [data-fatherid] selector.
function getByFather(id) {
return document.querySelectorAll(`[data-fatherid='${id}']`);
}
console.log([...getByFather(1)]);
console.log([...getByFather(2)]);
<ul>
<li id="1.1" data-fatherid="1">1.1</li>
<li id="1.2" data-fatherid="1">1.2</li>
<li id="1.3" data-fatherid="1">1.3</li>
<li id="2.1" data-fatherid="2">2.1</li>
<li id="2.2" data-fatherid="2">2.2</li>
</ul>
Since Document.querySelectorAll accepts a selector we can make use of the CSS attribute selector:
const r = document.querySelectorAll('li[fatherid="1"]');
console.log(Array.from(r));
<ul>
<li id="1.1" fatherid="1"> ...</li>
<li id="1.2" fatherid="1"> ...</li>
<li id="1.3" fatherid="1"> ...</li>
</ul>
Related
So I have these three lists which I want to hide.
<ul id="wordsb" class="wordslist" class="list1">
<li class="list-group-item">list1</li>
<li class="list-group-item">dancing</li>
<li class="list-group-item">elephant</li>
</ul>
<ul id="wordsb1" class="wordslist" class="list2">
<li class="list-group-item">list2</li>
<li class="list-group-item">man</li>
<li class="list-group-item">dog</li>
</ul>
<ul id="wordsb2" class="wordslist" class="list3">
<li class="list-group-item">list3</li>
<li class="list-group-item">plane</li>
<li class="list-group-item">truck</li>
</ul>
I am using the queryselectorall in order to access the ids loop through them, applying a style to each of them:
var gameb = document.querySelectorAll("#wordsb", "#wordsb1", "#wordsb2");
for (var i = 0; i < gameb.length; i++) {
gameb[i].style.display = "none";
}
Unfortunately, only the first list (wordsb) is hidden as desired, and the remaining two elements do not seem to be impacted. When I console.log(gameb) I found that the node list only includes wordsb, and not the other two elements. enter code here
querySelectorAll only takes one parameter:
var gameb = document.querySelectorAll("#wordsb, #wordsb1, #wordsb2");
for (var i = 0; i < gameb.length; i++) {
gameb[i].style.display = "none";
}
<ul id="wordsb" class="wordslist" class="list1">
<li class="list-group-item">list1</li>
<li class="list-group-item">dancing</li>
<li class="list-group-item">elephant</li>
</ul>
<ul id="wordsb1" class="wordslist" class="list2">
<li class="list-group-item">list2</li>
<li class="list-group-item">man</li>
<li class="list-group-item">dog</li>
</ul>
<ul id="wordsb2" class="wordslist" class="list3">
<li class="list-group-item">list3</li>
<li class="list-group-item">plane</li>
<li class="list-group-item">truck</li>
</ul>
This was just a silly mistake, document.queryselectorall only takes one parameter, and I accidentally put quotation marks around each of my elements. Thereby, making multiple parameters. Thus the node list didnt reflect all three of my elements.
I'm currently searching for a solution for sorting a nested list with Tinysort.js
My HTML
<ul class="speechlev1">
<li data-title="indo-european" data-ratio="48">Indo-European
<ul class="speechlev2">
<li data-title="albanian" data-ratio="100">Albanian</li>
<li data-title="armenian" data-ratio="75">Armenian</li>
<li data-title="balto-slavic" data-ratio="75">Balto-Slavic</li>
<li data-title="celtic" data-ratio="34">Celtic</li>
<li data-title="germanic" data-ratio="78">Germanic</li>
<li data-title="greek-phrygian" data-ratio="23">Greek-Phrygian</li>
<li data-title="tokharian" data-ratio="0">Tokharian</li>
</ul>
</li>
<li data-title="nilo-saharan" data-ratio="43">Nilo-Saharan</li>
<li ata-title="sepik" data-ratio="42">Sepik</li>
<li data-title="sino-tibetan" data-ratio="28">Sino-Tibetan
<ul class="speechlev2">
<li data-title="chinese" data-ratio="13">Chinese</li>
<li data-title="tibeto-burman" data-ratio="34">Tibeto-Burman</li>
</ul>
</li>
<li data-title="uto-aztecan" data-ratio="60">Uto-Aztecan</li>
</ul>
Javascript
$(document).ready(function() {
tinysort('.speechlev2>li',{attr:'data-ratio'});
});
Result:
Indo-European
Tokharian
Chinese
Greek-Phrygian
Celtic
Tibeto-Burman
Armenian
Balto-Slavic
Nilo-Saharan
Sepik
Sino-Tibetan
Germanic
Albanian
Uto-Aztecan
Should be:
Indo-European
Tokharian
Greek-Phrygian
Celtic
Armenian
Balto-Slavic
Germanic
Albanian
Nilo-Saharan
Sepik
Sino-Tibetan
Chinese
Tibeto-Burman
Uto-Aztecan
I have set up a CodePen to show my problem:
http://codepen.io/anon/pen/QbPVox
My problem is that tinysort sorts the li also between different parents. How can I fix that
Can somebody help me with that?
Just sort each of your lists separately:
$(document).ready(function() {
$('.speechlev2').each(function() {
tinysort($('li', this), {attr:'data-ratio'});
});
});
What I'm trying to do here is check if an element has the same id as a class in another element if so hide the matching id.
So far this is what I have came up with but it doesn't seem to kick.
JSfiddle
var theid = $('#me li').attr('id');
if ($('#you li').hasClass( theid )) {
$('#me li#'+theid+'').hide();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<ul id="me">
<li id="num-0">iam 1</li>
<li id="num-1">ieam 2 & should be hidden</li>
<li id="num-2">iam 3</li>
<li id="num-3">iam 4</li>
<li id="num-4">ieam 5 & should be hidden</li>
<li id="num-5">iam 6</li>
</ul>
<ul id="you">
<li class="num-1">iam killer</li>
<li class="num-4">iam killer</li>
</ul>
Use each() to loop over all the li elements inside the #you
hide() the elements having the id same as the class of current element in loop.
$('#you li').each(function() {
$('#' + $(this).attr('class')).hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<ul id="me">
<li id="num-0">iam 1</li>
<li id="num-1">ieam 2</li>
<li id="num-2">iam 3 & should be hidden</li>
<li id="num-3">iam 4</li>
<li id="num-4">ieam 5 & should be hidden</li>
<li id="num-5">iam 6</li>
</ul>
<ul id="you">
<li class="num-2">iam killer</li>
<li class="num-4">iam killer</li>
</ul>
Demo
When you use the .attr() method on a jQuery object that contains multiple elements, it just returns the attribute from the first element. You need to loop over each element and check them one at a time.
It is, however, OK for your purposes to use .hasClass() on the set of all of the #you elements, because .hasClass() will return true if any of the elements in the set has that class. So:
var you = $('#you li');
$('#me li').each(function() {
if (you.hasClass(this.id))
$(this).hide();
});
Note that I'm keeping a reference to the $('#you li') jQuery object in the variable you to save selecting those elements again every time in the loop.
Demo: https://jsfiddle.net/d65sz4js/2/
Try this for your jquery:
$(function() {
$("#you li").each(function(){
var theid = $(this).attr('class');
$('#'+theid).hide();
});
});
Demo: https://jsfiddle.net/nkem9o7o/
You could filter the #me li's, returning elements where their id exists as a class in #you li's, then just hide them. This would also work for multiple classes:
$('#me li').filter(function() {
return $('#you').has('.' + this.id).length;
}).hide();
Here's a fiddle
I need to get the id's of the 'vehicle' class from the <ul>. How can I get that using jquery/javascript? Can it be done with iterating through all the elements? Thanks in advance.
<ul id="ulList">
<li id="car" class="vehicle">
<li id="bus" class="vehicle">
<li id="cat" class="animal">
<li id="dog" class="animal">
<li id="bike" class="vehicle">
<li id="monkey" class="animal">
</ul>
Use map().
Also, correct your HTML markup like in the snippet(class="").
Finally, use .get() if you need a true JavaScript array (instead of a jQuery collection of strings — jQuery's collections [sets] usually contain DOM elements, but can contain anything).
var ids = $('#ulList .vehicle').map(function(){
return $(this).attr('id');
}).get();
console.log(ids);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<ul id="ulList">
<li id="car" class="vehicle"></li>
<li id="bus" class="vehicle"></li>
<li id="cat" class="animal"></li>
<li id="dog" class="animal"></li>
<li id="bike" class="vehicle"></li>
<li id="monkey" class="animal"></li>
</ul>
As there are already other answers with jQuery, here is an alternative using vanila Javascript:
var vehicles = document.querySelectorAll("ul#ulList > li.vehicle");
var ids = [].map.call(vehicles, function(elem) {
return elem.id;
});
console.log(ids);
<ul id="ulList">
<li id="car" class="vehicle">
<li id="bus" class="vehicle">
<li id="cat" class="animal">
<li id="dog" class="animal">
<li id="bike" class="vehicle">
<li id="monkey" class="animal">
</ul>
vehicleIds is an array to which you push all the ids of elements whose class is vehicle.
var vehicleIds = [];
$(".vehicle").each(function(){
vehicleIds.push($(this).attr("id"));
});
alert(vehicleIds);
Then I alert the array at the end.
$('div','#main').each(function(){
array.push($(this).attr('id'));
});
Here div is the element whose children's id have to be pushed in an array & '#main' is the id of that div.
Hope this will help you.
I have this structure of html. To present the list of two different sets. and i must handle the click event differently.
<div id='nodelist1'>
<ul>
<li class='nodeelem'>first node
<ul>
<li class='nodeelem'>second node
<ul>
<li class='nodeelem'>third node</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div id='nodelist2'>
<ul>
<li class='nodeelem'>first node
<ul>
<li class='nodeelem'>second node
<ul>
<li class='nodeelem'>third node</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
I have to access the nodes using div id
$('#nodelist1 li.nodeelem').click(handler);
$('#nodelist2 li.nodeelem').click(handler2);
Is this rightway to access children clicks???
You forgot the hash # for ID selectors (although you corrected this in your edit):
$('#nodelist1 li.nodeelem').click(handler);
$('#nodelist2 li.nodeelem').click(handler2);
Tip: you can make the event more effective by using on() instead for event delegation:
$('#nodelist1').on('click', '.nodeelem', handler);
$('#nodelist2').on('click', '.nodeelem', handler2);