CODEWITHSUNDEEP
jquerycss
Tae-Sung Shin
Tae-Sung Shin

Reputation: 20620

when jquery's css change will be shown in browser?

My javascript runs like this on firebug:

 tr=$(this).parent('tr');
 tr.find('.img-delete').css('display','block');

but I can't see the change on the browser. Is there anything I can do to make it shown?

Update:

First I didn't know (or remember) it should show as soon as the change made. I have UI items on a thickbox, I was able to catch events of the items in the window and changed css accordingly. But it didn't show. So my question goes.

Upvotes: 0

Views: 76

Answers (3)

ClarkeyBoy
ClarkeyBoy

Reputation: 5010

Try using .closest (my preference) or .parents instead of .parent. The reason for this is that .parent only references the immediate parent, whereas the two methods I suggested go up more than one level.

Upvotes: 1

David Thomas
David Thomas

Reputation: 253416

Because, in this instance, you're responding to an event on an element within a table-cell, may I suggest (as related in the comments to your question):

$(this).closest('tr').find('.img-delete').show();

JS Fiddle demo/proof-of-concept.

I've switched from parent() to closest(), as parent() only looks at the immediate parent, rather than working its way up the DOM tree of the element's ancestor elements. As the parent of the input is not, and cannot, in valid HTML, be, the tr element parent() will return a null, undefined or false (or falsey) value, rather than an element to work upon.

The reason I suggest closest(), as opposed to parents() is that closest() stops at the first element that matches the selector, and therefore returns a single element, whereas parents() continues up the DOM tree of the element's ancestors and returns, potentially, multiple elements in an array.

As you're likely to want to act upon only a single element, closest() seems a better match.

References:

Upvotes: 2

Daniel Dyson
Daniel Dyson

Reputation: 13230

Have you tried 

 $('tr').find('.img-delete').css('display','block');

Alternatively,

  tr.find('.img-delete').show();

This will set the display to block if it is a block element.

What happens when you just enter $('tr').find('.img-delete') into the console in FireBug? Is anything returned by the selector? What are the propertieson it? These are the things that you should be looking at.

Also, what is the tag of the element with the class .img-delete? Is it a 'block' class? I asume it is an img tag, but this might not be the case. If not, look at this page to decide what display style to use: http://www.w3schools.com/cssref/pr_class_display.asp

Upvotes: 1

Related Questions