Как добавить div и добавить класс, где div id совпадает со значением td в jquery?

Question

У меня есть следующие два HTML, которые генерируются PHP.

Я хочу добавить второй к первой таблице тд. Я хочу добавить class = "date_has_event" к тд, если есть события. Каждое событие имеет номер, который является датой в 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 должен быть добавлен к тд 17 и 19-й к тд 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>

Answer 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)
      }
   });
});

Не проверено, но я просто хотел показать основную идею, как вы можете решить свою проблему.

Answer 2

Попробуйте:

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

Заменить #mytable идентификатором вашей таблицы

Answer 3

Попробуйте что-то вроде этого:

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

В приведенном выше коде вы должны указать правильные идентификаторы div и td.