I would like to add an inline style to the last LI that is generated with the ASP:repeater control.
I can't add a css class, i need to some how count the last li with the class called:
class="tile lower-boxes icon_email"
If I've understood your question, then the following should work for you:
$(".tile.lower-boxes.icon_email:last").css("color", "#C00");
Obviously, that selector and the CSS method can be changed to your needs. You can also add a class to the element, which would be preferable:
$(".tile.lower-boxes.icon_email:last").addClass("foo");
More info on the :last selector.
Jquery has a last function that will let you choose it functionally.
$('li.tile').last()
or you can use the :last selector
$('li.tile:last')
Edit: Fix Bad link
we can also use jQuery :last Selector..
e.g:
$("li:last").css('background-color', 'yellow');
I know the question is quite old but thought it might be helpful for others ..
Related
I'm just wondering how I can select elements in jQuery dynamically, for example here is a selector of mine:
$("#video_background_video_0, #video_background_video_1, #video_background_video_2, #video_background_video_3, #video_background_video_4").remove();
As you can see this isn't the best example of DRY programming, I'd like to create a selector that selects all elements that begin with #video_background_video_. I basically just want to select the above elements in the cleanest way, I was wondering if there is a way that I can dynamically select these elements with some sort of count instead of placing all of my selectors like so, it just looks very messy and I'm wondering if there is a better way to do this when it comes to elements with a numeric ending?
As jQuery uses a CSS selector syntax I am unsure how I can do this.
Thanks, Nick
You can use start-with selectors:
$('[id^="video_background_video"]').remove();
There are other attribute selectors you might be interested here.
Try to use attribute starts with selector,
$("[id^='video_background_video'")
Also make sure that, this selector is not a native css based one. It will fetch the elements after executing regular expressions internally. So it would be better to use it in a minimum level. Its Better to set a common class to those elements and use class selector instead.
I was looking to do a .fadeIn() animation chained to this .after(), but this doesn't appear to be the way of doing it. Any suggestions?
$(clicked_item).parent().parent().parent().after(str).fadeIn("slow");
You should use .insertAfter();
$(str)
.hide()
.insertAfter($(clicked_item).parent().parent().parent())
.fadeIn("slow");
In addition to #EmreErkan's answer, try minimizing your code. Use parents() and select the id or class of the div you wish to add the text after instead of using parent() three times:
$(str)
.hide()
.insertAfter($(clicked_item).parents(selector))
.fadeIn("slow");
EDIT: As pointed out in the comments, it is better to use closest() instead of parents() if you are targeting a single element, which using parents() with a selector usually implies.
$.fn.after() will return the element it was run on (in this case $(clicked_item).parent().parent().parent()). If that is the element you want to fadeIn then I see no problem. If you want to fadeIn() the 'str' element instead I'd suggest doing this:
$(str).insertAfter($(clicked_item).parent().parent().parent()).fadeIn('slow');
A more stable way of getting a specific parent of an element that doesn't require you to change the number of .parent() calls if you change the HTML is to use .parents() together with a tag name:
$(clicked_item).parents('p').eq(0)
Change the 'p' to the element you want to reach.
Edit: woops, too late.
I have a asp.net Listview that is generating extra elements, good thing is the elements that I do want have a class name. How do I remove the s without the specific class that i need in jquery thanks!
Use the :not selector:
$("div:not([class])").remove();
Edit: jsfiddle.
class is just an attribute so you can select each one that doesn't have the attribute:
$('div:not([class])').remove()
$('div:not([class])').remove();
Wouldn't this work if I want to apply a new class to all H3 tags inside the RelArtik div?
$("h3",$("#RelArtik")).addClass("underrubrik");
Thanks.
According to the documentation jQuery should accept a jQuery object as the context so there's no obvious reason why what you've written shouldn't work.
However, it also says that:
$(selector, context)
is equivalent to:
$(context).find(selector)
So you could just try:
$('#RelArtik').find('h3').addClass(...);
which is of course also equivalent to:
$('#RelArtik h3').addClass(...);
however I believe the former .find() based solution is faster.
it's the same as CSS and would work with a descendant selector
$("#RelArtik h3").addClass("underrubrik");
Alternatively you can just do:
$('#RelArtik h3').addClass('underrubrik');
I use .append to add to a div
$(this).append('<ul><li>test</li></ul>');
how can I search for a <ul> and remove it if it exists in the children of $(this)?
You could use remove(). More information on jQuery remove().
$(this).children("ul").remove();
Note that this will remove all ul elements that are children.
The opposite of .append() is .prepend().
From the jQuery documentation for prepend…
The .prepend() method inserts the specified content as the first child of each element in the jQuery collection (To insert it as the last child, use .append()).
I realize this doesn’t answer the OP’s specific case. But it does answer the question heading. :) And it’s the first hit on Google for “jquery opposite append”.
Use the remove() method:
$(this).children("ul").remove();
What you also should consider, is keeping a reference to the created element, then you can easily remove it specificly:
var newUL = $('<ul><li>test</li></ul>');
$(this).append(newUL);
// Later ...
newUL.remove();
just had the same problem and ive come across this - which actually does the trick for me:
// $("#the_div").contents().remove();
// or short:
$("#the_div").empty();
$("#the_div").append("HTML goes in here...");
Opposite up is children(), but opposite in position is prepend().
Here a very good tutorial.