javascript - 在jquery中的rel下调用UL

Question

我试图通过jquery调用我的rel下的无序列表，但我似乎使用了错误的语法

<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'});
});

那么我应该在 jQuery 中附加什么来告诉它我只想更改 UL 的颜色，而不是整个 rel 的颜色。

我尝试过:

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

但这没有用。

Answer 1

您正在构建的选择器是:

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

但你想要:

.sun div[rel="subtitle1"] ul

删除+和多余的空格。

更好的是，停止滥用 rel 属性和编写无效的 HTML。使用一个类。这就是类的设计目的。

.sun div.subtitle ul

更好的是，不要为此烦恼 JavaScript。

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

更好的是，不要更改悬停时非交互式元素的外观。悬停效果是一条消息，指示可以单击某些内容。