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

我有一些css代码，这些代码基于id名称等针对元素，而不是单独命名：

.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>

我想做的是，用

subheader

类将这些相同的样式应用于

div

元素。我不想重复我的风格代码。主要的问题是，我试图用键盘输入复制鼠标覆盖代码（即使用选择中的箭头键）。我知道如何去做；我就是不知道如何将

：hover

样式从一个元素应用到另一个元素（或者如何将addClass与类似

：hover

的伪选择器一起使用）。

addClass

不用于处理其存档声明（尽管它可以）

它用于向dom元素添加另一个

类。（附页）

因此，它可以有另一种/更具风格的行为

Jquery：

它只是简单地添加类，将其附加到任何可能已经存在的类
分配给元素

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

为什么不使用
$（“.tzOptions.li.subheader”）.addClass（“myClassName”）？
你不能那样做。但是，您可以创建一个函数，该函数将获取定义到特定元素的所有css（这对其他人来说不是一个好主意，但您可以尝试）。然后将该样式应用于元素

试试看

//Function to get all the css for a particular dom element

jQuery.fn.css2 = jQuery.fn.css;
jQuery.fn.css = function() {
    if (arguments.length) return jQuery.fn.css2.apply(this, arguments);
    var attr = ['font-family','font-size','font-weight','font-style','color',
        'text-transform','text-decoration','letter-spacing','word-spacing',
        'line-height','text-align','vertical-align','direction','background-color',
        'background-image','background-repeat','background-position',
        'background-attachment','opacity','width','height','top','right','bottom',
        'left','margin-top','margin-right','margin-bottom','margin-left',
        'padding-top','padding-right','padding-bottom','padding-left',
        'border-top-width','border-right-width','border-bottom-width',
        'border-left-width','border-top-color','border-right-color',
        'border-bottom-color','border-left-color','border-top-style',
        'border-right-style','border-bottom-style','border-left-style','position',
        'display','visibility','z-index','overflow-x','overflow-y','white-space',
        'clip','float','clear','cursor','list-style-image','list-style-position',
        'list-style-type','marker-offset'];
    var len = attr.length, obj = {};
    for (var i = 0; i < len; i++) 
        obj[attr[i]] = jQuery.fn.css2.call(this, attr[i]);
    return obj;
}

//函数获取特定dom元素的所有css
jQuery.fn.css2=jQuery.fn.css；
jQuery.fn.css=函数（）{
if（arguments.length）返回jQuery.fn.css2.apply（this，arguments）；
var attr=['font-family'、'font-size'、'font-weight'、'font-style'、'color'，
“文本转换”、“文本装饰”、“字母间距”、“单词间距”，
“行高”、“文本对齐”、“垂直对齐”、“方向”、“背景色”，
“背景图像”、“背景重复”、“背景位置”，
“背景附件”、“不透明度”、“宽度”、“高度”、“顶部”、“右侧”、“底部”，
‘左’、‘上边距’、‘右边距’、‘下边距’、‘左边距’，
“padding-top”、“padding-right”、“padding-bottom”、“padding-left”，
“边框顶部宽度”、“边框右侧宽度”、“边框底部宽度”，
“边框左侧宽度”、“边框顶部颜色”、“边框右侧颜色”，
“边框底色”、“边框左颜色”、“边框顶样式”，
“右边框样式”、“下边框样式”、“左边框样式”、“位置”，
‘显示’、‘可见性’、‘z索引’、‘溢出x’、‘溢出y’、‘空白’，
“剪辑”、“浮动”、“清除”、“光标”、“列表样式图像”、“列表样式位置”，
“列表样式类型”、“标记偏移量”]；
var len=attr.length，obj={}；
对于（变量i=0；i
您必须使目标元素与css选择器匹配，方法是为其提供一个具有
tzOptions
类的父元素，使其成为
li
的子元素，然后为其提供
副标题
类。创建新类的可能重复项。您的逻辑是反向的，添加js来动态定义类将比复制类产生更多的开销。仅仅是需要这一点也意味着你需要重新思考你目前的风格，因为它们显然不能正常工作。需要经常重复的样式应该被分解，这样它们就可以自己应用，而不是封装在另一个类中。@RickCalder-我不能“重新思考”我当前的样式；这是一个巨大的系统，我只能访问其中的一小部分。这些样式是通用的，我不能更改或添加任何内容。<好的，很公平。继续，不，你不明白这个问题。我定义了一个样式，它确实应用于
.tzOptions li.subheader
。现在，我想将这些相同的样式应用于不同的元素，而不必定义一个命名类，该类包含与为
.tzOptions li.subheader
定义的样式代码相同的样式代码。您能否向样式块添加另一个选择器？不，正如我在OP的注释中所说，我无法对css进行任何更改。
//Function to get all the css for a particular dom element

jQuery.fn.css2 = jQuery.fn.css;
jQuery.fn.css = function() {
    if (arguments.length) return jQuery.fn.css2.apply(this, arguments);
    var attr = ['font-family','font-size','font-weight','font-style','color',
        'text-transform','text-decoration','letter-spacing','word-spacing',
        'line-height','text-align','vertical-align','direction','background-color',
        'background-image','background-repeat','background-position',
        'background-attachment','opacity','width','height','top','right','bottom',
        'left','margin-top','margin-right','margin-bottom','margin-left',
        'padding-top','padding-right','padding-bottom','padding-left',
        'border-top-width','border-right-width','border-bottom-width',
        'border-left-width','border-top-color','border-right-color',
        'border-bottom-color','border-left-color','border-top-style',
        'border-right-style','border-bottom-style','border-left-style','position',
        'display','visibility','z-index','overflow-x','overflow-y','white-space',
        'clip','float','clear','cursor','list-style-image','list-style-position',
        'list-style-type','marker-offset'];
    var len = attr.length, obj = {};
    for (var i = 0; i < len; i++) 
        obj[attr[i]] = jQuery.fn.css2.call(this, attr[i]);
    return obj;
}