CODEWITHSUNDEEP
jqueryhtmlcss
Mausami
Mausami

Reputation: 692

How to get position of div inside td

I am creating calendar in php, html, css and jquery.

My table is like this :

<table>
   <tr bgcolor="silver" id="10"> 
      <td style="width:10%;" id="resource10">Mausami Pandit</td>
      <td style="width:70px;" class="tbDay" id="resource10">
             <div class="08:01" style="display:inline; position:relative;"></div>
               .
               .
               .
             <div class="08:30" style="display:inline; position:relative;"></div>
      </td>
      <td style="width:70px;" class="tbDay" id="resource10">                                                  <div class="08:31" style="display:inline; position:relative;"></div>                                                                .
               .
               .
              <div class="08:30" style="display:inline; position:relative;"></div>
      </td>
   </tr>
</table>

This is for one hour and i have it like this for each hour from 08:00 to 18:30.

Now i want to select the div of a particular time and need to change the background color. Means i want to change the color of a particular time slot.

I tried to select div like this :

  $('td#resource10').find('div.08:31').addClass('test');

but its not working.

Can anyone tell me where is my mistake ?

or how can i achieve this ?

Thanks in advance.

Upvotes: 0

Views: 185

Answers (1)

user1823761
user1823761

Reputation:

Working jsFiddle Demo

First you have multiple element with ID resource10. This is wrong.

Second you have : in your classname, so catch them with ~ selector:

$('.tbDay').find('[class~="08:30"]').addClass('test');

Thanks to BrunoLM, you can also use this:

$('.tbDay').find('.08\\:30').addClass('test');

Although jQuery will handle the multiple same IDs for you in this case:

$('#resource10').find('[class~="08:30"]').addClass('test');

I suggest you don't use multiple elements with same ID.

Upvotes: 2

Related Questions