CODEWITHSUNDEEP
jquerycssinternet-explorerjquery-selectorscss-selectors
Pierluc SS
Pierluc SS

Reputation: 3176

CSS selector works, jquery selector doesn't (IE only issue)

Please note that the following is an IE only issue (as usual...)

I have the following HTML code:

<input id="foo" type="checkbox" checked="checked" />
<label for="foo">
  <span>some foo text</span>
</label>

I have a CSS rule that is working perfectly:

#foo + label > span{  
    display: block;
    line-height: 1em;
    padding: 0.4em 1em;
    cursor: pointer;
    text-align:center;
    text-decoration:none;
}

I then have a CSS selector which match the same CSS selector which is not returning anything:

var textVal = $("#foo + label > span").text();

But for some reason if I use the following line, it is going to return the correct value:

var textVal = $("#foo + label").html() or .text()

I really want to select the label's span, because I want to change the text of it and don't want to append a new span everytime.

Thank you,

EDIT:

Interesting, if I do the following it works...

var label = $("#foo + label");
var textVal = $(">span",label).text();

Upvotes: 1

Views: 264

Answers (2)

Vigrond
Vigrond

Reputation: 8198

This is working in IE8 for me. Perhaps its' because you didn't close the " on checked="checked ?

Example: http://jsfiddle.net/mEAYr/

Upvotes: 1

Phil Klein
Phil Klein

Reputation: 7514

Try the following:

var textVal = $("label[for='foo'] span").text();

Upvotes: 1

Related Questions