如何使用jquery附加div并添加div id与td值相同的类？答案

【问题标题】：How to append div and add class where div id is the same as td value with jquery?如何使用jquery附加div并添加div id与td值相同的类？
【发布时间】：2010-01-18 06:50:52
【问题描述】：

我有以下两个由 PHP 生成的 HTML。

我想将第二个附加到第一个表 td。如果有事件，我想将 class="date_has_event" 添加到 td 。每个事件都有数字，即 div id 中的日期。

我正在使用 jquery，但我不确定。谁能告诉我如何处理这个问题？

HTML

<tr>
<td>17</td><td><div class="highlight">18</div></td><td>19</td><td>20</td>
<td>21</td><td>22</td><td>23</td>
</tr>

DIV 我想附加到上面的 HTML。

--更新--

以下将由 PHP/MYSQL 动态生成。这些是事件列表。第 17 个 div 必须附加到 td 是 17 和第 19 个 div 到 td 19 等等。

<div id ="17" class="events">
     <ul style="opacity: 0; top:
20px; left: -76px; display: none; bottom: -202px;">
       <li><a href="index.php/admin
/calendar/edit/1">
       <span class="title">17th event 1</span>
       <span class="desc">event 1 of 17th</span></a>
       </li>
       <li><a href="index.php/admin/calendar/edit/4">
       <span class="title">17th event 2</span>
       <span class="desc">event 2 of 17th</span></a>
       </li>
       <li><a href="index.php/admin/calendar/edit/13">
       <span class="title">make pancake with
emile</span>
       <span class="desc">mix flour, water and raindrops with love</span></a>
       </li>
    </ul>
  </div>


    <div id="19" class="events">
   <ul style="opacity: 0;">
      <li><a href="index.php/admin/calendar/edit/2">
      <span class="title">19th event 1</span>
      <span class="desc">id 2 change</span>
</a></li>
      <li><a href="index.php/admin/calendar/edit/5">
      <span class="title">19th event 2</span>
      <span class="desc">event 2 of 19th</span></a>
      </li>
      <li><a href="index.php/admin/calendar/edit/6">
      <span class="title">19th event 3</span>
      <span class="desc">event 3 of 19th</span></a>
      </li>
    </ul>
 </div>
    ...
    ...

我想要的最终输出。

<tr>
   <td class="date_has_event"> 17<div class="events">
     <ul style="opacity: 0; top:
20px; left: -76px; display: none; bottom: -202px;">
       <li><a href="index.php/admin
/calendar/edit/1">
       <span class="title">17th event 1</span>
       <span class="desc">event 1 of 17th</span></a>
       </li>
       <li><a href="index.php/admin/calendar/edit/4">
       <span class="title">17th event 2</span>
       <span class="desc">event 2 of 17th</span></a>
       </li>
       <li><a href="index.php/admin/calendar/edit/13">
       <span class="title">make pancake with
emile</span>
       <span class="desc">mix flour, water and raindrops with love</span></a>
       </li>
    </ul>
  </div>
</td>
<td id="today"> 18</td><td class="date_has_event"> 19<div 
class="events">
   <ul style="opacity: 0;">
      <li><a href="index.php/admin/calendar
/edit/2">
      <span class="title">19th event 1</span>
      <span class="desc">id 2 change</span>
</a></li>
      <li><a href="index.php/admin/calendar/edit/5">
      <span class="title">19th event 2</span>
      <span class="desc">event 2 of 19th</span></a>
      </li>
      <li><a href="index.php/admin/calendar/edit/6">
      <span class="title">19th event 3</span>
      <span class="desc">event 3 of 19th</span></a>
      </li>
    </ul>
 </div>
</td>
<td> 20</td><td> 21</td><td> 22</td><td> 
23</td></tr>

【问题讨论】：

标签： jquery class append

【解决方案1】：

假设您的 td 单元有一个类 my_td。也许像这样：

$(document).ready(function(){
   $('.my_td').each(function(){
      var div_id = $(this).text();
      var matched_div = $('div#'+div_id);
      if(matched_div.children('ul li').length){
        $(this).addClass = 'date_has_event';
        $(this).append(matched_div)
      }
   });
});

未经测试，但我只是想展示如何解决问题的基本思路。

【讨论】：

【解决方案2】：

试试这样的：

if ($('div[@id]') == $(td).html())
{
    $('somediv').html('<div>whatever</div>')
    $('somediv').addClass('classname');
}

在上面的代码中，你应该指定正确的 div 和 td 标识符。

【讨论】：

【解决方案3】：

试试：

$('#mytable td').each (function ()
{
    var cell = $(this), div = $('#' + cell.text());
    if (div.length)
        cell
        .addClass ('date_has_events')
        .append (div);
});

将#mytable 替换为您的表ID

【讨论】：