Reputation: 2743
I'm managing a <a>
's element display with jquery. Based on some keypress events, it appends or removes an <input>
's class (responsible with display
management) that has a sibling relationship with the mentioned <a>
.
The problem is that, i have a selector that uses CSS +
. And for some reason, in Chrome (im not sure about other browsers since i have not tested), it won't display:block
the <a>
element when the sibling <a>
has the class.
<div class="cont">
<input class="myInput"/>
<label>S</label>
<a>X</a>
</div>
.cont {
position: relative;
}
a {
position: absolute;
left: 117px;
top: 3px;
display: none;
}
label {
position: absolute;
left: 140px;
top: 3px;
}
.has_typed + label + a {
display: block;
}
$("input").on('keyup', function(){
var thiss = $(this);
if (thiss.val() != 0 && !(thiss.hasClass('has_typed'))) {
thiss.addClass('has_typed');
}
else if (thiss.val() == 0) {
thiss.removeClass('has_typed');
}
});
Fiddle here: http://jsfiddle.net/aF4qt/1/
Upvotes: 4
Views: 150
Reputation: 41832
If you are doing every thing in jQuery then why not do the rest using jQuery itself.
Try this:
$('.has_typed + label + a').show();
Not sure though why the same was not working in css
This will also work if you have multiple groups.
Check this fiddle
Check this link for more info.
Upvotes: 1
Reputation: 128791
Change:
.has_typed + label + a { ... }
To:
.has_typed ~ label + a { ... }
http://jsfiddle.net/JamesD/aF4qt/7/
Upvotes: 4