jquery - jQuery addClass 不起作用

Question

我正在尝试使用 addClass 在我的 Joomla 模板上给我斑马条纹表。我使用以下代码：

 <script>
  jQuery(function($) {
    $("tr:odd").addClass("odd");
  });
</script>

我已经能够使用 tr:odd 选择器将 css 动态添加到表行，但是当我使用 addClass 函数时它就没有（我检查了生成的源代码并且没有表行具有类“奇数”） .

不知道我可能做错了什么，将不胜感激。

Answer 1

所以您知道，当您查看源代码时，不会反映使用 Javascript 对 DOM 所做的更改。

如果您的 CSS 看起来像这样，那么该代码应该可以工作......

tr.odd td
{
    background:#070;
}

Answer 2

这里有两种创建斑马条纹的方法/方法，一种使用 jQuery，一种使用 CSS3。

第一种方法——使用jQuery

HTML

要创建“条纹”表，我们需要创建一个带有 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

我们为偶数行创建一个样式，为奇数行创建另一个样式。

<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

最后，我们需要创建将 CSS 类添加到 tr 标签的 jQuery 代码，这是通过以下代码实现的：

<script type="text/javascript">  
   $(document).ready(function() {  
   $("#stripedTable tr:odd").addClass("oddRow");  
   $("#stripedTable tr:even").addClass("evenRow");  
});  
</script>

第一行选择 id 为 zebra_triped 的元素内的奇数 tr 标签，并将它们添加到类“oddRow”，最后一行对偶数行执行相同操作，将它们添加到类“evenRow”。

第二种方法——使用 CSS

** 我的最爱 ：）*

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

<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; 和- webkit -border-radius: 11px; 在这里，我为每个角定义容器边框的半径/圆角。这只是一行指定所有角的半径属性，但我可以针对特定角，如下所示：

- moz -border-radius-bottomleft:11px;
- moz -border-radius-bottomright:11px;
- moz -border-radius-topleft:11px;
- moz -border-radius-topright:11px;

和

- webkit -border-radius-bottomleft:11px;
- webkit -border-radius-bottomright:11px;
- webkit -border-radius-topleft:11px;
- webkit -border-radius-topright:11px;

希望这可以帮助，

艾哈迈德

Answer 3

jQuery 不会更改 HTML 文档的源代码，它会更改 DOM 结构（文档的内存表示）。要查看这些更改，您必须使用显示文档 DOM 的浏览器插件（Firefox 的 Firebug，IE 的 Developers Tools (F12)）。

Answer 4

尝试将类添加到，td而不是像这样：

$("tr:odd td").addClass("odd");

Answer 5

 $('table tr').each(function() {
    if ($(this).find('td').eq(6).text() === 'Start') {
        $(this).addClass('tooltip');
    }
 });