Is it possible to use .find() to find a list item with a css property?
I thought this might work, but apparently not:
$('#selector').find('li').css('font-family','Arial, sans-serif').addClass('class');
Thanks!
Add a comment
|
4 Answers
Assuming I've understood you correctly, you are trying to select li elements with a font-family property of Arial, sans-serif. If that's right, you can use filter to reduce the matched set to those elements which pass the test:
$("#selector").find("li").filter(function() {
return this.style.fontFamily === "Arial, sans-serif";
}).addClass("class");
What you currently have will apply the font-family rule you have specified to all li elements found by the call to find, and then apply the class to all of them as well.
Edit
As noted in the comments, the style property only takes into account inline CSS properties (those defined in a style attribute on the element). If that is not the case, you can use the jQuery css getter method:
$("#selector").find("li").filter(function() {
return $(this).css("fontFamily") === "Arial, sans-serif";
}).addClass("class");
3 Comments
Esailija
this.style. means inline styles in the html elements while jQuery.fn.css uses elem.currentStyle/window.getComputedStyle(elem) which means the style can be retrieved even if it came from css. It's not too clear which one the OP wanted though.
James Allardice
@Esailija - Very true. Good point, thanks. I've updated the answer.
user1048007
Thanks James! I appreciate the help and explanation. I haven't used .filter() before, and may be using it more often. The second method worked for my purposes.
$('#selector').find('li').filter(function (){return $(this).css('font-family')=='Arial' || $(this).css('font-family')=='sans-serif'}).addClass('class');
1 Comment
James Allardice
I think the OP is after elements with a font-family value of "Arial, sans-serif", not either "Arial" or "sans-serif".
Yes, it's possible, but not with find() alone, I'd suggest iterating through the li elements with each(), I think:
$('li').each(
function(){
if ($(this).css('font-family') == 'Arial' || $(this).css('font-family') == 'sans-serif') {
$(this).addClass('class');
});
3 Comments
James Allardice
I think the OP is after elements with a
font-family value of "Arial, sans-serif", not either "Arial" or "sans-serif".
David Thomas
A valid point, certainly. But since your answer accomplishes that already, I'd not like to add essentially the same information again to my answer. It just feels like pretension to do so. So I leave this as an incomplete answer, covering a divergent assumption. But my thanks for the pointer. =)
James Allardice
Very true, and altogether more useful than simply changing your answer :)
If you are trying to find by inline css property you could try css contain selector:
$('#selector li[style|"Arial, sans-serif"]').addClass('class');
If you are looking by css property defined in css file, then you should locate the items using the filter define those li items in the external css file. Let's say suppose your css file has: .myLI {font-family: Arial, sans-serif;}, then you could type $'(#selector li.myLI').addClass('class')
