0

I'm trying to get the color attribute value of the first <b> element inside a <td>. I'm getting an array object from jquery when I request for:

var items = $("td.yfnc_tabledata1").has("img");

This returns 30 results of <td> that contain an <img> tag inside. So my approach is to try and do this inside a for loop:

var color = $(items)[i].find("b").attr("color");

and then count if color === Y || color === X etc etc.

I can't seem to find how to get the color attribute of the first <b>. The HTML looks like this:

<td>
  <img src="" />
  <b style="color:#aaa000"> </b>
  <b style="color:#aa6700"> </b>
</td>
nullwriter
  • 785
  • 9
  • 34

3 Answers3

2
var color = $(items[i]).find('b:first').css('color')

// or, to get the exact HEX you specified (as long as you have specified it by a style attrib, so won't work if you specify it by ext css)

var color2 = $(items[i]).find('b:first').attr('style').split(':')[1]

color is a string containing an rgb. You can convert it to hex by RGB to Hex and Hex to RGB.

color2 is a string containing the hex value

what did you do wrong

$(items)[i] is returning a DOM node w/out the fancy jQuery functionalities. Moreover 'color' is not an attribute, it is a property of the css, so even .attr("color"); won't work.

why is my example working

items[i] will return a DOM node. To use jQuery's methods on that element you have to pass that as parameter to the $ (jQuery alias) function. That will return a wrapped jQuery object. On that object you will be able to check the :first (not :first-child) <b> child element, and then you will finally ask to the awsm jQuery to give you the 'color' specified on the css by the style attribute.

p.s. you can also iterate by using $.each(items, function(){ // $(this) is the iTh item })

Community
  • 1
  • 1
stecb
  • 14,478
  • 2
  • 50
  • 68
  • Thanks man. Very complete answer and I understood what was wrong which is the most important bit! – nullwriter Sep 29 '14 at 18:26
  • Great to know :) glad it was useful! If you don't understand something feel free to comment here! – stecb Sep 29 '14 at 18:36
  • Just one thing: the solution var color2 = $(items[i]).find('b:first').attr('style').split(':')[1] works only if the color is the first style specified. – Academia Sep 30 '14 at 10:42
  • @user1038382 yes, exactly, I took it for granted :) .. if it's not the first style then the OP needs to edit it. But that's another story – stecb Sep 30 '14 at 11:27
1

Assuming you have a complete table definition, the following will work:

$("td b:first").css('color')

jsfiddle

Cœur
  • 37,241
  • 25
  • 195
  • 267
ron tornambe
  • 10,452
  • 7
  • 33
  • 60
-2

Jquery supports psuedo selectors, I don't have much experience of array and JavaScript, But if had to select the first B tag in ur TD, I would try writing

$("td b:first").css("color","#f00");

It would set its color to red, You can also use attrib.

Hope it helps you somewhere..!

Deepak Yadav
  • 6,804
  • 5
  • 31
  • 49
  • You should setup a fiddle and test it – Huangism Sep 29 '14 at 18:01
  • Ok, `first-child` will target the first child of the parent container, in this case, it is an `img` tag – Huangism Sep 29 '14 at 18:04
  • `first-of-type` is probably what you meant. –  Sep 29 '14 at 18:05
  • I selected b tag inside Td, so it would select the first and for other he can use last-child, or :nth-child(n) – Deepak Yadav Sep 29 '14 at 18:05
  • No, you selected `b` elements on the condition that they are the first child of their parent. None of the `b` elements in the HTML meed that criteria, so it'll return an empty set. http://jsfiddle.net/fyne9ug6/ Whereas `first-of-type` would give you the first element within the parent of the given type. http://jsfiddle.net/fyne9ug6/1/ –  Sep 29 '14 at 18:07