CODEWITHSUNDEEP
javascriptjqueryhtmllist
robotturtle
robotturtle

Reputation: 71

call UL under a rel in jquery

I'm trying to call the unordered lists under my rel through jquery but I seem to be using the wrong syntax

<div class="sun">
        title
        <div rel="subtitle1">
            <ul>
                <li>aaaaaaaaa</li>
            </ul>
        </div>

        <div rel="subtitle2">
            <ul>
                <li>bbbbbbbb</li>
            </ul>
        </div>
</div>

Javascript

$(this).hover(function() {
    $('.sun div[rel= "'+ $(this).attr('rel') +'"]').css({color: 'red'});
});

So what do I append to the jQuery to tell it that I only want to change the color of the UL, not the whole rel.

I tried:

$('.sun div[rel= "'+ $(this).attr('rel') +'"] + ul + ').css({color: 'red'});

but that didn't work.

Upvotes: 0

Views: 177

Answers (1)

Quentin
Quentin

Reputation: 943142

The selector you are building is:

.sun div[rel= "subtitle1"] + ul +

But you want:

.sun div[rel="subtitle1"] ul

Remove the +s and extra space.

Better yet, stop abusing the rel attribute and writing invalid HTML. Use a class. It is what classes are designed for.

.sun div.subtitle ul

Better still, don't fuss around with JavaScript for this.

.sun div.subtitle:hover ul {
    color: red;
}

Even better, don't change the appearance of non-interactive elements on hover. Hover effects are a message to indicate things can be clicked.

Upvotes: 2

Related Questions