CODEWITHSUNDEEP
jquery
Mario
Mario

Reputation: 166

Attribute selector on style doesn't work

i've to find the div within the "para" class which is visible at the moment. I tried:

 $('.para div[style="display: block;"]').attr("id")

but it doesn't work.

I also wrote an example on js fiddle --> http://jsfiddle.net/JZFgp/3/

I'm thankful for any hints and solutions.

Mario

Upvotes: 0

Views: 204

Answers (3)

Guffa
Guffa

Reputation: 700302

You can't use the style attribute reliably in a selector. Some browsers will leave the attribute value unchanged, while others will normalise the value.

In IE8 for example, reading the attribute value gives you "display: block" rather than "display: block;", but you can't use a selector with [style="display: block"] (or [style="display: block;"]) to find the element.

Upvotes: 0

James Allardice
James Allardice

Reputation: 165971

That will work fine, but your markup is invalid in the fiddle. Here's a fixed version:

<table> <!-- You didn't have a `table` or `tr` element -->
    <tr>
        <td class="para">
            <div id="TripSet" class="rounded-corner-region" style="display: none;">
            <div id="DriverSet" class="rounded-corner-region" style="display: none;">
            <div id="TimeSet" class="rounded-corner-region" style="display: block;">
            <div id="Loading" class="borderless-region" style="display: none;">
        </td>
    </tr>
</table>​

Without the table and tr elements, the browser does its best to interpret your markup and ends up just removing the td (in Chrome at least), which means the .para part of your selector can no longer match.

Edit

It looks like Chrome (most likely others too but I haven't tested) is quite happy for you to omit the tr element, as long as there is a table element. It automatically adds a tbody and tr around your td elements.

Upvotes: 5

techfoobar
techfoobar

Reputation: 66663

$('.para div:visible').attr("id") should work.

Upvotes: 1

Related Questions