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");
});
Related
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>
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 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)
}
I want to select the tags onlu inside a by the index shown in the link names. What is the best method of doing this?
<div class="index-get">
<div class="column">
Category Title
<ul>
<li>Index 0</li>
<li>Index 1</li>
<li>Index 2</li>
<li>Index 3</li>
<li>Index 4</li>
</ul>
</div>
<div class="column">
<ul>
<li>Index 5</li>
<li>Index 6</li>
<li>Index 7</li>
<li>Index 8</li>
<li>Index 9</li>
</ul>
</div>
</div>
$('.index-get ul a').click(function(){
var aIndex = $(this).index();
console.log(aIndex);
});
var aIndex = $('.index-get li a').index($(this));
and you should cache $('.index-get li a') outside of the event handler
var $lia = $('.index-get li a');
$lia.on('click',function() {
console.log($lia.index($(this)));
})
Not sure if the question is clear enough but here is something that might relate to what you need:
$('.index-get ul a').click(function(){
var aIndex = $(this).text();
console.log(aIndex);
});
And the fiddle.
EDIT
I think I finally got it the question sigh... :-)
Since there is only one A inside each parent LI the index of A tags will always be 0 in your example because the index is in relation to the sieblings...
If you calculate the index for the LI you might get better result. But keep in mind the index is only counted inside each parent so for the two ULs you will get two sets of LI children hence clicking Index 1 or Index 6 will yield the same result.
New Fiddle
One more edit
Actually the ULs are nor sieblings and one must go above to the DIV and down again into the ULs to be able to count the LI of previous items... But I guess it works just perfect for your needs. I I understood your needs that is... ;-)
$('.index-get ul li').click(function(){
var aIndex = $(this).index()+$(this).parent().parent().prev().find("ul").children().length;
console.log(aIndex);
});
And the fiddle.
Last edit
Making the line slightly simpler
var aIndex = $(this).index() + $(this).parent().parent().prev().find("ul li").length;
&(this) is an LI element.
$(this).parent() is the UL
$(this).parent().parent() is the DIV
$(this).parent().parent().prev() are all the sibling elements of that DIV (hopefully only DIVs in there and all with the same type of content)
$(this).parent().parent().prev().find("ul li") all LI inside UL inside sibling DIVs.
$(this).parent().parent().prev().find("ul li").length; the number of LI in the previous line.
There you go. Simple logic! ;-)
And when you think all is done and settled... There comes one more edit!!! :-)
I was thinking of the solution I proposed and it will eventually fail if you have more then two UL groups and if you click on a LI located in the third UL or later.
Therefore I have created yet another solution which uses .prevAll() instead of just .prev() but then must use the .each() with a function to add up all the count of all LI elements from the previous ULs.
Fiddle
Now I can go sleep in peace! :-)
Fabricio
Try this code:
$('.index-get ul a').click(function(){
var aIndex = $(this).text().match(/\d+$/)[0];
console.log(aIndex);
});
This should work no matter how deep the li's are nested:
var items = $('li');
items.on('click', function() {
var clicked_item = $(this);
items.each(function(index){
if ($(this).is(clicked_item)){
console.log(index);
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="index-get">
<div class="column">
Category Title
<ul>
<li>Index 0</li>
<li>Index 1</li>
<li>Index 2</li>
<li>Index 3</li>
<li>Index 4</li>
</ul>
</div>
<div class="column">
<ul>
<li>Index 5</li>
<li>Index 6</li>
<li>Index 7</li>
<li>Index 8</li>
<li>Index 9</li>
</ul>
</div>
</div>
i am having some trouble with the menu bar on this website: http://www.re-generation.ro/ro/campanii/minerit-aurifer .
Now, the second li element is active. What i want to do, is that on hover over any other li element in the menu, the class of the current active li element becomes blank and on on hover out, it becomes active again. If you visit the link you can easily understand what i what.
If you need any information pls ask.
thank you in advance!
My code:
var lis = document.getElementsByTagName('ul');
for (var i=0, len=lis.length; i<len; i++){
lis[i].onmouseover = function(){
var firstDiv = this.getElementsByTagName('li')[1];
firstDiv.className = '';
var ul = $(this).parent(document.this.getElementsByTagName('ul')[1]);
ul.className = '';
};
lis[i].onmouseout = function(){
var firstDiv = this.getElementsByTagName('li')[1];
firstDiv.className = 'active';
};
};
EDIT: Thank you all for your answers! That really helped!
The first thing you probably want to do is assign two different states/classes: active and current. One tells you which one should be shown, and the other actually toggles the visibility.
$('#menu').on('mouseover', '> li', function(e) {
# attach hover event to the menu, and check which LI you are hovering
if (!$(this).hasClass('.current)')) {
$('.current', '#menu').removeClass('active');
}
}).on('mouseout', '> li', function (e) {
if (!$(this).hasClass('.current)')) {
$('.current', '#menu').addClass('active');
}
});
Here you are selecting just the direct descendants and updating the class, provided it's not the currently active list item.
HTML:
<ul id="menu">
<li>Item 1</li>
<li class="current active">Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
JavaScript:
$('#menu li').on('mouseover', function() {
var li$ = $(this);
li$.parent('ul').find('li').removeClass('active');
li$.addClass('active');
})
.on('mouseout', function() {
var li$ = $(this);
li$.removeClass('active');
li$.parent('ul').find('li.current').addClass('active');
});
DEMO
I would use JQuery for this. Something like this:
$('li').hover(function(){
$('li.active').removeClass('active').addClass('normal');
});
$('li').mouseleave(function(){
$('li.normal').removeClass('normal').addClass('active');
});
What you're missing is a way to remember what the default state is. Here is my answer, and a Fiddle
HTML:
<ul class="menuWithDefault">
<li>Link One</li>
<li class="active">Link One</li>
<li>Link One</li>
<li>Link One</li>
</ul>
Javascript:
$(".menuWithDefault").each(function() {
var defaultItem = $(this).find(".active").first();
$(this).find("li").hover(function() {
defaultItem.toggleClass('active', false);
$(this).toggleClass('active', true);
}, function() {
$(this).toggleClass('active', false);
defaultItem.toggleClass('active', true);
});
});
$(document).ready(function(){
$('li').hover(function(){
$(this).addClass('active').siblings().removeClass('active')
});
});
li.active{
color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="active">List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
</ul>