Assuming I have a set up of:
<ul id="cal">
<li><span>test</span><img /></li>
<li><span>test</span><img /></li>
<li><span>test</span><img /></li>
</ul>
and in the jQuery:
$('#cal li span').hover(function(){
$("#cal li img").trigger('mouseover');
});
I need to trigger mouseover on the #cal li img, but on only the image of the span rather than all of the images
You can refer to closest <img> using $(this).next() or with:
$("#cal li span").hover(function() {
$(this).siblings("img").trigger("mouseover");
});
Specify it is linked to your context with:
$('#cal li span').hover(function(){
$(this).parent().find("img").trigger('mouseover');
});
$('#cal li span').hover(function(){
$(this).next("img").trigger('mouseover');
});
Related
I have the following code in html. I just want to remove active class when we click on other li and add active class to li on which it is clicked.
<ul class="pagination" id="paginationUL">
<li class="active">1</li>
<li onclick="javascript:selectThis()">2</li>
I tried to remove the class first and it is not working. Please suggest.
function selectThis() {
$('ul[class="pagination"] li[class="active"]').removeClass("active"));
}
Edited the script and it is working.
Your selectors are incorrect. You need to use the ID (#) or class (.) selector:
$('#paginationUL li.active').removeClass("active");
However, you're better off not using intrusive event handlers, and rather doing something along the lines of the following:
$('#paginationUL > li').on('click', function() {
$(this).addClass('active').siblings('.active').removeClass('active');
});
The latter example will apply a class of active to the clicked element and remove it from any other elements in the <ul>.
You can use something like this
$("#paginationUL li").click(function() {
$(this).toggleClass("active");
$(this).siblings().removeClass("active");
});
If you're using jquery this should do it:
$('#paginationUL li').click(function(){
$('#paginationUL li').removeClass("active");
$(this).addClass('active');
});
Your selector is incorrect. Use #paginationUL[class="pagination"] li[class="active"] or ul.pagination li.active or #paginationUL li.active
You can write a line to bind to all li elements in that menu. The $(this) selector acts against the element clicked on, while using .siblings() acts on all other child li elements.
$('#paginationUL > li').click(function(){
$(this).addClass('active').siblings().removeClass('active')
})
.active { background: orange; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="pagination" id="paginationUL">
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ul>
I am setting some <li> and anchor tag using jQuery . Now i want to remove the attach li on anchor click.Let me show on code what I am trying to do.And I can't assign any id to these elements as they are generating dynamically.
<ul id="imagess">
<li><img width="60" height="60" src="http://example.com/images/event.png"></li> <img style="float: left; margin-left: -25px;margin-top: 60px;" src="http://example.com/images/delete.png">
<li><img width="60" height="60" src="http://example.com/images/event2.png"></li> <img style="float: left; margin-left: -25px;margin-top: 60px;" src="http://example.com/images/delete.png">
</ul>
I am trying to remove the <li> on deletit() js function call
A solution for your current HTML using event delegation.
$(document).on('click', 'li + a', function(){
$(this).prev().remove();
})
However, your HTML/JS should look more like this to be valid:
$(document).on('click', '#imagess li a', function(){
console.log(this);
$(this).closest('li').remove();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="imagess">
<li>
<img width="60" height="60" src="http://example.com/images/event.png">
<a href="javascript:void(0);">
<img style="float: left; margin-left: -25px;margin-top: 60px;" src="http://example.com/images/delete.png">
</a>
</li>
<li>
<img width="60" height="60" src="http://example.com/images/event2.png">
<a href="javascript:void(0);">
<img style="float: left; margin-left: -25px;margin-top: 60px;" src="http://example.com/images/delete.png">
</a>
</li>
</ul>
$('ul a').click(function() {
$(this).prev().remove();
});
prev() gets the previous sibling to the a element, which is the li. remove() is pretty self explanatory.
Also, your HTML is invalid. The only elements allowed as direct children of ul are li elements.
Edit: The answers with "closest" given above will be correct if you move the a inside the li. People are assuming they're already in there as the HTML is invalid otherwise.
Update : remove inline onclick attribute from a tag as you have defined click event in code itself
Previous fiddle : http://jsfiddle.net/Lp88exqb/
New Fiddle : http://jsfiddle.net/Lp88exqb/1/
You should not have a tag as direct child of ul tag, it should be in li tag and than you have to use following code to remove previous li on any click
$('ul a').click(function() {
$(this).parent().prev().remove();
});
1. Step 1
Your HTML CODE has to be like this
-------------------------------------
<code>
<ul id="imagess">
<li>Img1</li>
Img1
<li>Img2</li>
Img2
</ul>
</code>
-------------------------------------------
2. Write a JS Funcion like this
-------------------------------------------
function deleteit(obj){
$(obj).prev('li').remove();
}
You have the jQuery tag, so here is an example with that:
$(this).closest('li').prev().remove();
Update: from the wording of question details and your comment, it sounds like path is the anchor itself, and that you don't want to remove previous li, but the container li itself, if so, change to:
$(path).closest('li').remove();
Update 2
Check this:
$('#imagess').on('click', 'a', function() {
$(this).prev('li').remove();
return false;
})
However, this is only for your invalid HTML, where the <a> lives directly inside <ul>. In correct way, the <a> should be inside the <li>, which I see is now fixed in another answer.
I have a menu on a page. I want to add the class username to the my username span, that has an a href; that equals ?m=user_admin&p=edit_user&user_id=1.
Keep in mind that I want it to add this class, no matter what the username is! because the username will change all the time. How can I do it?
Example of the Menu
<div class="menu">
<ul>
<li><a class="user_menu_link_selected" href="#"><span>Dashboard</span></a></li>
<li><a class="user_menu_link" href="#"><span>Monitor</span></a><li>
<li><a class="user_menu_link" href="#"><span>Admin</span></a></li>
<li><a class="user_menu_link" href="#"><span>FTP</span></a></li>
<li><a class="user_menu_link" href="?m=user_admin&p=edit_user&user_id=1"><span>my username</span></a></li>
</ul>
</div>
I tried this JS code but it added the class to all the spans. I only want it added on the my username span because the href equals ?m=user_admin&p=edit_user&user_id=1.
$('ul a').each(
function(){
if($(this).attr('href')=="?m=user_admin&p=edit_user&user_id=1"){
$('.menu > ul > li > a > span').addClass("username");
}
});
$('ul a').each(
function(){
if($(this).attr('href')=="?m=user_admin&p=edit_user&user_id=1"){
$(this).find('span').addClass("username");
}
});
The following line should refer to this:
$('.menu > ul > li > a > span').addClass("username");
Probably
$(this).addClass("username");
use CSS here is the documentation it will select all the span whose parent a has the link
a[href='?m=user_admin&p=edit_user&user_id=1'] span {
color:Red
}
demo - http://jsfiddle.net/zq0fs7om/
Try this..
$('ul li a').each(
function(index){
if($(this).attr('href')=="?m=user_admin&p=edit_user&user_id=1"){
$(this).children('span').addClass("username");
}
});
You can check out the jsfiddle here:
http://jsfiddle.net/ow1478rd/
here's the gist of the code:
$('ul > li > a').each(function(){
if($(this).attr('href')=="?m=user_admin&p=edit_user&user_id=1"){
$(this).closest("li").find("span").addClass("username");
}
});
Basically the thing to note here is "closest" will basically search UP the DOM, and then "find" will search DOWN the DOM. so with your structure you're going up to the closest list element, and then finding the span inside of it to change the CSS. Hope this helps man.
I have a simple question yet it's not working out. See this html:
<div id="viewer">
<ul class="tj_gallery">
<li><img src="images/projecten/main/chicane.png" alt="" width="280" height="178" />01</li>
</ul>
</div>
The a.abhover is absolutely positioned inside the relative li. The a.abhover has display:none; in CSS. If I hover one li (it's a long list!) the a.abhover should fadeIn # 1000ms. Right now this is working, but only for every single one of those li's. See my jQuery code:
$(".tj_gallery li").hover(function(){
$(".tj_gallery li a.abhover").stop(true,true).fadeIn("fast");
}, function(){
$(".tj_gallery li a.abhover").stop(true,true).fadeOut("fast");
});
Adding $(this, ".tj_gallery li a.abhover") or $(".tj_gallery li a.abhover", this) doesn't help (it breaks it).
$(".tj_gallery li").hover(function(){
$("a.abhover", this).stop(true,true).fadeIn("fast");
}, function(){
$("a.abhover", this).stop(true,true).fadeOut("fast");
});
I have this html code
<ul>
<li><img src="path_to_image1"><span>some text</span></li>
<li><img src="path_to_image2"><span>some text</span></li>
<li><img src="path_to_image3"><span>some text</span></li>
</ul>
Images are of different width.
I need to set width of SPAN element to be equal as IMG width.
Here is the code that I wrote by looking over the StackOverflow board.
$(document).ready(function() {
$("ul li a").each(function() {
var theWidth = $(this).find("img").width();
$("ul li a span").width(theWidth);
});
});
Now this code returns only width of the last image.
What to change so I can have width of span element same as img?
Thanks
$('ul li img').each(function() {
var imgWidth = $(this).width();
$(this).next('span').css({'width': imgWidth});
});
You just need to correct one line:
$("ul li a span").width(theWidth);
Replace with:
$(this).find('span').width(theWidth);
the answer is in your own code, almost..
$(this).find("span").width(theWidth);
Replace this line
$("ul li a span").width(theWidth);
with
$(this).find('span').width(theWidth);
Explanation: the line $("ul li a span").width(theWidth); sets the width for all three span elements.
The 'each' loop runs 3 times.
The first time it sets all three spans to the width of the first image.
The second time it sets all three spans to the width of the second image.
...
Can you just set the widths of the <li>'s to the same width as the image and set the <span> as display: block;
The spans will then be as wide as their contain (the <li>) and it saves you a little extra jquery trying to dig down to span level.
Also, to help speed up your jquery selector simply add an id to the list and target that instead of trying to match ul li a...; now all you have to do is match #widths.
Example
<ul id="widths">
<li><img src="path_to_image1"><span>some text</span></li>
<li><img src="path_to_image2"><span>some text</span></li>
<li><img src="path_to_image3"><span>some text</span></li>
</ul>
$(document).ready(function() {
$('#widths img').each(function() {
var imgWidth = $(this).width();
$(this).next('span').css({'width': imgWidth});
});
});
There are many ways around this, this worked for me though.
$(document).ready(function () {
$("ul li a img").each(function (index) {
$(this).next().width($(this).width()).css("display", "block");
});
});