0

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

.tzOptions li .subheader {

相对

.myClassName

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

$listItems.addClass('myClassName');

如何处理不仅包含命名类，还包含命名类的“分层”版本，该命名类随后包含具有另一个命名类的 dom 元素？我需要将应用于不同 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。）

4

3 回答 3

1

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

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

于 2013-01-03T15:17:43.673 回答
0

addClass不是为了操纵等级声明（尽管可以）

它用于向classdom 元素添加另一个。（附加）

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

查询：

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

于 2013-01-03T15:17:30.787 回答
0

你不能那样做。但是您可以创建一个函数，该函数将获取定义给特定元素的所有 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;
}
于 2013-01-03T15:50:32.037 回答