Question

我有一些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>

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

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

我想要做的是，将这些相同的样式应用于div类的subheader元素。我不想复制我的样式代码。主要问题是，我正在尝试用键盘输入复制鼠标悬停代码（即使用选择中的箭头键）。我知道如何去做;我无法弄清楚如何将:hover样式从一个元素应用到另一个元素（或者如何将addClass与:hover之类的伪选择器一起使用。）

Answer 1

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

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

Answer 2

addClass 不用于操纵层面声明（虽然它可以）

用于向dom元素添加另一个class。（追加）

所以它可以有另一种/更多的风格行为

Jquery：

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

Answer 3

你不能那样做。但你可以创建一个函数，它将获得定义到特定元素的所有css（对于同伴来说不是一个好主意，但你可以尝试this）。然后将该样式应用于您的元素。

试一试

//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;
}

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

3 个答案: