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
Related
How to write
document.getElementsByClassName("navtab")[3].classList.add("active");
in jquery.
My attempt:
$(".navtab")[3].addClass("active");
This gave an error like:
index-page9.html:745 Uncaught TypeError: $(...)[3].addClass is not a function
$(".navtab")[3]
actually returns a DOM element and .addClass() jQuery method can not be used on DOM elements. You need to use .eq() method to get nth index jQuery object like:
$(".navtab").eq(3).addClass("active");
Demo:
$(".navtab").eq(3).addClass("active");
.active { background-color: skyblue }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="navtab">List item 1</li>
<li class="navtab">List item 2</li>
<li class="navtab">List item 3</li>
<li class="navtab">List item 4</li>
<li class="navtab">List item 5</li>
</ul>
You can use it in jquery like this:
var element = $('.navtab')[3];
$(element).addClass("active");
i'm having an unordered list with several elements and i'm using jquery sortable for moving items around - here's my markup:
<ul>
<li id=1>item 1</li>
<li id=2>item 2</li>
<li id=3>item 3</li>
<li rel=2>insert</li>
<li id=4>item 4</li>
</ul>
the "insert" element is related to the LI having ID 2 - my question:
what's the best practice for determing if the related item is above or below the "insert" element? (in this case: above)
if($(this).prevAll("[id=2]").length > 0)
{
//element is above
}
if($(this).nextAll("[id=2]").length > 0)
{
//element is below
}
You can use nextAll and prevAll functions of jquery for this. Here $(this) refers to insert element.
You can use the index function to get the place of the element and compare it to other elements:
inserted = $('li[rel=2]');
$('ul li').click(function() {
if (inserted.index() > $(this).index()) {
console.log('Clicked element is above');
} else if (inserted.index() < $(this).index()) {
console.log('Clicked element is below');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li id=1>item 1</li>
<li id=2>item 2</li>
<li id=3>item 3</li>
<li rel=2>insert</li>
<li id=4>item 4</li>
</ul>
I have list with id myid. I can get values li values like this $('#' + i).text(). But I am using $( '#myid' ).sortable() . How can get values in currently displayed order? Demo here. I need to implement function in stop:
<ul id='myid'>
<li id='1'>value 1</li>
<li id='2'>value 2</li>
<li id='3'>value 3</li>
<li id='4'>value 4</li>
<li id='5'>value 5</li>
</ul>
Use .each() with .text() : Updated Fiddle
stop:function(){
$('li',this).each(function(){
alert($(this).text())
});
}
or map() to get them into array.
stop:function(){
var $li= $('li',this).map(function(){
return $(this).text()
});
alert($li)
}
This is a simple question, but, I haven't found a clear answer in any of the question that I found. I modified a JSFiddle for my specific question.
I got this tiny code:
<ul>
<li id='one'>Element 1</li>
<li id='two'>Element 2</li>
<li id='three'>Element 3</li>
<li id='four'>Element 4</li>
<li id='five'>Element 5</li>
</ul>
and this script should return the ul element excepting the first li:
$(function(){
$("ul").not($('#one'))
});
Instead, it removes every li. What have I done wrong?
EDIT: In others words, I would like a selector which selects this, without removing the actual element (= inside a variable)
<ul>
<li id='two'>Element 2</li>
<li id='three'>Element 3</li>
<li id='four'>Element 4</li>
<li id='five'>Element 5</li>
</ul>
FIDDLE: http://jsfiddle.net/LVUMs/13/
Use
$("ul li").not($('#one')).remove();
DEMO
OR
$("ul li:not(#one)").remove();
DEMO 2
EDIT
You need
var ulexceptOneLi = $("ul li:not(#one)");
or
var ulexceptOneLi = $("ul li").not($('#one'));
Try this code:
Fiddle
$(function(){
$("ul>li").not($('#one')).empty();
});
Assuming you meant to keep the ul in play:
$("ul li#one").remove();
Here's a fiddle...
If you're wanting to return a ul element with the removed element inside, try this:
function do_crazy_thing(){
var removed = $("ul li#one").remove();
return $('<ul></ul>').append(removed);
}
do_crazy_thing();
Here's another fiddle...
Here's how you would then append your new ul element to the body...
Demo Fiddle
According to your question, your expected output is :
<ul>
<li id='two'>Element 2</li>
<li id='three'>Element 3</li>
<li id='four'>Element 4</li>
<li id='five'>Element 5</li>
</ul>
Check the demo.
Edit :
$(function(){
var removed = $("ul li:not(#one)");
});
OR
var op = $("ul :not(#one)");
Please try below JS code
$(function(){
var test= $("ul li").remove("#one");
});
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.