jquery - 如何将 addClass 与基于选择器而不是命名类的样式一起使用？

Question

我有一些基于 id 名称等而不是单独命名的元素的 css 代码:

.tzOptions li .subheader {

对比

.myClassName

如何在第一个版本中使用 jquery 的 addClass？我知道命名版本，我可以做

$listItems.addClass('myClassName');

如何处理“分层”版本，它不仅包含一个命名类，而且包含一个命名类，然后包含一个具有另一个命名类的 dom 元素？我需要将应用于 .tzOptions li .subheader 的样式应用到不同的 dom 元素，但不想复制样式代码，这样我就可以应用一个命名类.

澄清

我似乎真的无法解释清楚。这就是我所拥有的。我有一大块 html:

<div id="options-reg-phone-type" class="tzOptions">
            <div class="scrollBlock">
                <ul id="dropdown-reg-phone-type">
                    <li>
                        <div class="header">Home</div>
                        <div class="subheader">info</div>
                        <div class="optkey">0</div>
                    </li>
                    <li>
                        <div class="header">Work</div>
                        <div class="subheader">info</div>
                        <div class="optkey">1</div>
                    </li>
                    <li>
                        <div class="header">Cell</div>
                        <div class="subheader">info</div>
                        <div class="optkey">2</div>
                    </li>
                </ul>
            </div>
        </div>
    </div>

我有一组应用于 header 类的 div 元素的样式:

.tzOptions li .header:hover { 
   color:#FFF; 
   font-size:14px; 
   font-weight:bold;
   line-height: 13px;
   padding-bottom:0;
}

我想要做的是，将这些相同的样式应用到具有 subheader 类的 div 元素。我不想重复我的样式代码。主要问题是，我试图用键盘输入复制鼠标悬停代码(即在选择中使用箭头键)。我知道该怎么做；我只是不知道如何将 :hover 样式从一个元素应用到另一个元素(或者如何将 addClass 与 :hover 这样的伪选择器一起使用。 )

Answer 1

如果我理解您的问题，您希望能够向具有选择器“.tzOptions li .subheader”的元素添加一个类。

为什么不使用 $(".tzOptions li .subheader").addClass("myClassName"); ？