1

I have the following div with a img src and and alt:

<div class="slick-cell"><span style="color: red;">99</span>
<img src="images/global.images.arrow_down_dark.png" alt="Downward">
</div>

How do I add a class "Down" to the parent DIV, (right after slick-cell class), if the alt of the src equal Downward.?

Thanks in advance with any help

something similar

if ($(".src").hasAlt("Downward")) {

        $(".slick-cell").addClass(".Down");
    }
user1564732
  • 47
  • 9

2 Answers2

9
$("img[alt='Downward']").parent().addClass("Down");

Bonus fiddle: http://jsfiddle.net/balintbako/5ZKhv/

Balint Bako
  • 2,500
  • 1
  • 14
  • 13
1

This modifies all images on the page at once:

$("img[alt='Downward']").closest(".slick-cell").addClass("Down");

Alternatively (jQuery is flexible):

$(".slick-cell").has("img[alt='Downward']").addClass("Down");
Tomalak
  • 332,285
  • 67
  • 532
  • 628
  • Why `.closest` (and its slower performance) over `.parent()` when the OP is looking for the parent div? – Derek Henderson Jun 19 '13 at 13:54
  • 1
    @DerekHenderson How is `.closest()` any slower than `.parent()` if it has to go only one step up? But if the page structure changes ever so slightly because the layout requires it, `.parent()` will be wrong but `.closest()` will most likely still be right. *(In any case, if you tell me/somebody "X is slower than Y" make sure it's in an area where it matters. When we're talking about traversing a few (hundred) DOM nodes 10ms faster or 10ms slower... This is not an area that matters.)* – Tomalak Jun 19 '13 at 13:57
  • The bit you added after the edit would have satisfied me. You're right, if the structure changes, then `parent()` is inadequate. If your response had simply stated that you were protecting against any such possible future changes, I wouldn't have bothered with the fiddle. – Derek Henderson Jun 19 '13 at 14:07
  • Looking at my results (
see "Chrome 29.0.1535") `.parent()` is on par with `closest()`. One way or the other, we're talking in the area of several ten thousand complete operations a second. Not worth even thinking about. – Tomalak Jun 19 '13 at 14:09
  • 1
    I tend to try and de-couple my jQuery code from the exact HTML structure as much as possible. If you have ("one has") to change the JS code along with *every minuscle change* you make to the page structure, you're not using jQuery right, IMHO. – Tomalak Jun 19 '13 at 14:12
  • I agree with that. It's the smart thing to do. I was simply curious your reasons, since the OP seems satisfied with simply finding the parent. For all we know, though, he might really just want the parent, which might have a different class in different cases. – Derek Henderson Jun 19 '13 at 14:17
  • thanks for your help, but I still can get the Down class to be added after slick-cell here is the fiddle http://jsfiddle.net/5ZKhv/2/ – user1564732 Jun 19 '13 at 14:55
  • This fiddle is working too, as does mine. If the alt text is blue, then it is working... – Balint Bako Jun 19 '13 at 14:59
  • @user1564732 What did you expect? You defined `color: red;` as an inline style on a child of `.slick-cell`. Of course it will be red, no matter what you do. Inline style always take precedence. Compare http://jsfiddle.net/5ZKhv/3/ – Tomalak Jun 19 '13 at 15:15