I'm wondering how to select an element that does not have a specific class using JavaScript, not jQuery.
For example, I have this list:
<ul id="tasks">
<li class="completed selected">One Task</li>
<li>Two Task</li>
</ul>
and I select the completed task by:
var completeTask = document.querySelector("li.completed.selected");
But then I'm not sure how to select the list item that does not have those classes.
This selects the second LI element.
document.querySelector("li:not([class])")
or
document.querySelector("li:not(.completed):not(.selected)")
Example:
// select li which doesn't have a 'class' attribute...
console.log(document.querySelector("li:not([class])"))
// select li which doesn't have a '.completed' and a '.selected' class...
console.log(document.querySelector("li:not(.completed):not(.selected)"))
<ul id="tasks">
<li class="completed selected">One Task</li>
<li>Two Task</li>
</ul>
To select the <li> that has not completed nor selected class:
document.querySelector("li:not(.completed):not(.selected)");
Fiddle
http://jsfiddle.net/Z8djF/
You can try the :not() selector
var completeTask = document.querySelector("li:not(.completed):not(.selected)");
http://jsfiddle.net/UM3j5/
The :not(*selector*) selector also accepts commas (so does querySelectorAll()) https://developer.mozilla.org/en-US/docs/Web/CSS/:not#syntax:
let plainElements = document.querySelectorAll( ':not( .completed, .in-progress ) ');
plainElements.forEach( ( item ) => { item.style.color = 'red'; } );
li { color: green; }
<ul id="tasks">
<li class="completed selected">Task 1</li>
<li>Task 2</li>
<li class="in-progress">Task 3</li>
</ul>
document.querySelectorAll('[wf-body=details] input:not(.switch):not(.btn)').forEach(function(e){
// do whatever you want. with 'e' as element :P
});
Try getting an array of the parent's children instead:
var completeTask = document.querySelector("#tasks").childNodes;
Then loop/search them as necessary.
Related
my html structure is like this
<ul>
<li>items1</li>
<li>items2
<ul>
<li>items2.1</li>
</ul>
</li>
<li>items3
<ul>
<li>items3.1</li>
</ul>
</li>
<li>items4</li>
</ul>
I want to add classes for each parent li like below, using JavaScript is there any possibility to do this?
<ul>
<li class="a">items1</li>
<li class="b">items2
<ul>
<li>items2.1</li>
</ul>
</li>
<li class="c">items3
<ul>
<li>items3.1</li>
</ul>
</li>
<li class="d">items4</li>
</ul>
Using not() filter and addClass(function)
$('li').not('li li').addClass(function(i) {
return String.fromCharCode(i + 97)
})
.a {color:red}
.b {color:orange}
.c {color:green}
.d {color:blue}
li li {color:black}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>items1</li>
<li>items2
<ul>
<li>items2.1</li>
</ul>
</li>
<li>items3
<ul>
<li>items3.1</li>
</ul>
</li>
<li>items4</li>
</ul>
var letters = "abcd";
$("ul").first().children().each(function(index, el)
{
$(el).addClass(letters[index]);
});
Assuming that there could be n number of list items, we can use: String.fromCharCode(97 + index) to get the letter (up to z).
$("ul").first().children("li").each((index, item) => {
const letterFromIndex = String.fromCharCode(97 + index);
let $item = $(item);
$item.addClass(letterFromIndex);
});
If we want add different names for the li u can use this code also
var names = ["ab", "bc", "cd", "de"];
$("ul").first().children().each(function(index, el)
{
$(el).addClass(names[index]);
});
I want to remove the textDecoration from a special item using a javascript ( preferably a query selector. I don't know what I'm doing wrong though. Here's the code. CodePen
<h1>Thanks for the Help!</h1>
<h1> My problem set </h1>
<ul>
<li id="highlight">List Item 1</li>
<li class="bolded">List Item 2</li>
<li class="bolded">List Item 3</li>
</ul>
var sLi = document.querySelector("ul a.special");
for (var i = 0; i <= sLi.length; i++){
sLi[i].style.textDecoration = "none";
}
There is no need to loop over your query result since querySelector() only returns one item.
Had you been using querySelectorAll(), you would want the loop as that returns a node list.
var sLi = document.querySelector("ul a.special");
sLi.style.textDecoration = "none";
<h1>Thanks for the Help!</h1>
<h1> My problem set </h1>
<ul>
<li id="highlight">List Item 1</li>
<li class="bolded">List Item 2</li>
<li class="bolded">List Item 3</li>
</ul>
Also (FYI), the li should contain the a and not the other way around.
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 am trying to create a check list. When you click on the li element, the child div of that element should become visible.
<div id="list_one">
<h2>LIST TITLE</h2>
<div id="line"></div>
<ul>
<li id="1-1"><div class="blue_line"></div><div class="circle"></div>TASK ONE</li>
<li id="1-2"><div class="blue_line"></div><div class="circle"></div>TASK TWO</li>
<li id="1-3"><div class="blue_line"></div><div class="circle"></div>TASK THREE</li>
<li id="1-4"><div class="blue_line"></div><div class="circle"></div>TASK FOUR</li>
<li id="1-5"><div class="blue_line"></div><div class="circle"></div>TASK FIVE</li>
<li id="1-6"><div class="blue_line"></div><div class="circle"></div>TASK SIX</li>
</ul>
</div>
Here is my Javascript:
$(document).ready(function() {
$(".blue_line").css("visibility","hidden");
$("li").click(function() {
var id = this.id;
console.log(id);
$(id).children().css("visibility","visible");
});
});
You do not need to use the id like that. Use $(this) to access the LI:
$(document).ready(function() {
$(".blue_line").css("visibility","hidden");
$("li").click(function() {
$(this).children().css("visibility","visible");
});
});
As pointed out elsewhere, the cause was using $(id) when you needed to do $('#' + id) to make it a valid jQuery ID selector
You have to include the # character:
$(document).ready(function() {
$(".blue_line").css("visibility","hidden");
$("li").click(function() {
var id = this.id;
console.log(id);
$("#" + id).children().css("visibility","visible");
});
});
But as already mentioned, it makes much more sense to use $(this) within the event:
$(document).ready(function() {
$(".blue_line").css("visibility","hidden");
$("li").click(function() {
$(this).children().css("visibility","visible");
});
});
Note sure if I got you right but:
$("li").on('click', function() {
$(this).toggleClass('checked');
});
Fiddle: http://jsfiddle.net/C6Qav/1/
"When an item is clicked add a checked class which shows a blue line".
It is nicer that way - less intrusive to use a class and you can do anything you want in the css file to the li element when it has the .checked class (not adding styles directly with javascript to the element is recommended).
PS Avoid using IDs everwhere.
I have li with unique text and i want to get the id on that text.
<ul id="test1">
<li>My Link</li>
</ul>
<ul id="test2">
<li>Test Link</li>
</ul>
I want to get the UL id, whose li anchor tag onclick function contains text is users.
You can use filter to do this:
var $usersUl = $('a').filter(function() {
return $(this).attr('onclick').indexOf('users') != -1;
}).closest('ul');
Example fiddle
It should be noted however that having your UI rely on a parameter in a JS function call is a little unsightly, if not verging on a hack. If you can, change the HTML to include some data attributes and filter by those:
<ul id="test1">
<li>My Link</li>
</ul>
<ul id="test2">
<li>Test Link</li>
</ul>
var $users = $('a').filter(function() {
return $(this).data('users');
}).closest('ul');
Using the attribute contains selector:
Fiddle
var id = $('ul > li > a[onclick*="\'users\'"]').closest('ul').attr('id');
Or to include the function name as well:
var id = $('ul > li > a[onclick="myfunction(\'users\')"]').closest('ul').attr('id');
I wouldn't use an onclick in this case, try something like this:
<ul id="test1">
<li>My Link</li>
</ul>
<ul id="test2">
<li>Test Link</li>
</ul>
Then jQuery:
$("li").click(function() {
parent = $(this).parent(); // your UL element
value = $(this).data('value'); // your parameter, you can use it now
// Rest of your function right here
});
Try this:
$('a[onclick*="users"]').each(function() {
console.log($(this).text());
});
DEMO
Try this:
$(document).ready(function(){
$('li a').on('click', function(){
alert($(this).closest('ul').prop('id'));
});
});
Here is my fiddle example http://jsfiddle.net/58CTf/3/
<script>
function myfunction(param, event) {
console.log(event.target.parentElement.parentElement.id);
}
</script>
Pass the current object in event handler and use to get the id of parent ul using closest(), onclick="myfunction(this,'users')"
Live Demo
HTML
<ul id="test1">
<li>My Link</li>
</ul>
<ul id="test2">
<li>Test Link</li>
</ul>
Javascript
function myfunction(obj, parm)
{
alert($(obj).closest('ul').attr('id'));
}
here it is:
$('ul a').click(function(){ // click event for anchor tag which is inside ul
if($(this).indexOf("users") == -1) // check if text contains users
{
console.log($(this).parent("ul").attr("id")); // get its parent ul id
}
})
try this this works great(use parent function)
$(function(){
$("ul li").find("a:contains(Link)").parent().parent().attr("id");
})