jQuery addClass 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1188184/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery addClass not working
提问by Chris Armstrong
I'm trying to use addClass to give me zebra-striped tables on my Joomla template. Im using the following code:
我正在尝试使用 addClass 在我的 Joomla 模板上为我提供斑马条纹表格。我使用以下代码：
<script>
jQuery(function($) {
$("tr:odd").addClass("odd");
});
</script>
I've been able to use the tr:odd selector to add css to table rows dynamically, but when i use the addClass function it just doesnt (I checked the source code produced and none of the table rows have the class "odd").
我已经能够使用 tr:odd 选择器动态地将 css 添加到表格行，但是当我使用 addClass 函数时，它只是没有（我检查了生成的源代码并且没有任何表格行具有“odd”类） .
Havn't a clue what I could be doing wrong, would appreciate any help.
不知道我可能做错了什么，希望得到任何帮助。
回答by Josh Stodola
So you know, changes to the DOM with Javascript are not reflected when you view the source.
所以您知道，当您查看源代码时，不会反映使用 Javascript 对 DOM 所做的更改。
That code should work if your CSS looks like this...
如果您的 CSS 看起来像这样，那么该代码应该可以工作...
tr.odd td
{
background:#070;
}
回答by egyamado
here are two ways/methods to create zebra-striped, one way using jQuery and one way using CSS3.
这里有两种创建斑马条纹的方法/方法，一种使用 jQuery 的方法和一种使用 CSS3 的方法。
First method– using jQuery
第一种方法——使用jQuery
HTML
HTML
To create the "striped" table, we need to create a table with an id to identify it and apply the style only to that table, in this example we'll name it "zebra_triped"
要创建“striped”表，我们需要创建一个带有 id 的表来标识它并将样式仅应用于该表，在本例中，我们将其命名为“ zebra_triped”
<table id="zebra_triped" cellpadding="1" cellspacing="1" >
<tr>
<td>Lorem ipsum dolor sit amet</td>
<td>Lorem ipsum dolor sit amet</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet</td>
<td>Lorem ipsum dolor sit amet</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet</td>
<td>Lorem ipsum dolor sit amet</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet</td>
<td>Lorem ipsum dolor sit amet</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet</td>
<td>Lorem ipsum dolor sit amet</td>
</tr>
</table>
CSS
CSS
We create a style for the even rows and another for the odd rows.
我们为偶数行创建一个样式，为奇数行创建另一个样式。
<style type="text/css">
html, body { font: 12px verdana; color: #333; }
table { background-color: white; width: 100%; }
.oddRow { background-color:#ffcc00; }
.evenRow { background-color:#cccccc; }
</style>
jQuery
jQuery
Finally, we need to create the jQuery code that will add the CSS classes to the tr tags, this is achieved with this code:
最后，我们需要创建将 CSS 类添加到 tr 标签的 jQuery 代码，这是通过以下代码实现的：
<script type="text/javascript">
$(document).ready(function() {
$("#stripedTable tr:odd").addClass("oddRow");
$("#stripedTable tr:even").addClass("evenRow");
});
</script>
The first line selects the odd tr tags inside an element with the id zebra_triped and adds them the class "oddRow", the last line does the same with the even lines, adding them the class "evenRow".
第一行选择 id 为 zebra_triped 的元素内的奇数 tr 标签并将它们添加到类“oddRow”，最后一行对偶数行执行相同的操作，将它们添加到类“evenRow”。
Second method– using CSS
第二种方法——使用 CSS
** My favorite :)*
** 我最喜欢的 ：）*
HTML
HTML
<div id="comments">
<h3>Comments</h3>
<div class="comments_body">
<header>By: <a href="#"> Lorem ipsum </a></header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,.</p>
</div>
<div class="comments_body">
<header>By: <a href="#"> Lorem ipsum </a></header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, </p>
</div>
<div class="comments_body">
<header>By: <a href="#"> Lorem ipsum </a></header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, </p>
</div>
<div class="comments_body">
<header>By: <a href="#"> Lorem ipsum </a></header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, </p>
</div>
<div class="comments_body">
<header>By: <a href="#"> Lorem ipsum </a></header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, </p>
</div>
</div>
CSS
CSS
<style type="text/css">
html, body { font: 12px verdana; color: #333; }
table { background-color: white; width: 100%; }
#comments { margin-top: 21px; padding-top: 10px; border-top: 1px solid #d7d7d7; }
#comments .comments_body { display: table; padding: 10px; }
#comments .comments_body:nth-child(odd) {
padding: 21px;
background: #E3E3E3;
border: 1px solid #d7d7d7;
-moz-border-radius: 11px; // support FireFox which runs on Mozilla engine
-webkit-border-radius: 11px; // support Safari and Chrome which they run on WebKit engine
// as usual IE is behind and no support for it yet, unless you need to hack it using Java Script.
}
</style>
-moz-border-radius: 11px;and -webkit-border-radius: 11px;Here I'm defining the radius/round corner for the container's border for each corner. This is only one line specify the radius property for all corners, but I can target specific corner as below:
- MOZ-border半径：11像素; 和- webkit-border-radius: 11px; 在这里，我为每个角的容器边界定义了半径/圆角。这只是一行指定所有角的半径属性，但我可以针对特定的角，如下所示：
- moz -border-radius-bottomleft:11px;
- moz -border-radius-bottomright:11px;
- moz -border-radius-topleft:11px;
- moz -border-radius-topright:11px;
and
和
- webkit -border-radius-bottomleft:11px;
- webkit -border-radius-bottomright:11px;
- webkit -border-radius-topleft:11px;
- webkit -border-radius-topright:11px;
Hope this helps,
希望这可以帮助，
Ahmed
艾哈迈德
回答by Lloyd
jQuery does not change source code of HTML document, it changes DOM structure (in-memory representation of document). To see these changes you have to use browser plug-in that shows DOM of document (Firebug for Firefox, Developers Tools (F12) for IE).
jQuery 不会更改 HTML 文档的源代码，它会更改 DOM 结构（文档的内存表示）。要查看这些更改，您必须使用显示文档 DOM 的浏览器插件（Firefox 的 Firebug，IE 的开发人员工具 (F12)）。
回答by Andrew Hare
Try adding the class to the tdinstead like this:
尝试将类添加到 ，td而不是这样：
$("tr:odd td").addClass("odd");
回答by Ashish Srivastava
$('table tr').each(function() {
if ($(this).find('td').eq(6).text() === 'Start') {
$(this).addClass('tooltip');
}
});
