Search code examples
javascriptjquerytags

Evaluate this element tag using jQuery


<td class="fc-event-container" colspan="2"\>
<a class="fc-day-grid-event fc-h-event fc-event fc-start fc-end fc-draggable" style="background-color:#FF4500;border-color:#FF4500">
8a 55555-Sovereign Housing-Jn
</a>
</td>

How can I get the object under td tag and check the value of a tag then alter value of colspan of td tag?

I was trying to access the element by jQuery selector and I have done this:

$('td[class^="fc-event-container"]').each(function (index)
 {                 
  console.log($(this.find('a[class^="fc-day-grid-event"]')));
})

Which is returning an array of size 8. What I want to do is i have to change value of colspan of first index while checking value of firstcol and lastCol which is coming after

$('a[class^="fc-day-grid-event"]')[0]['fcSeg']` which is showing value like
`component: DayGrid 
{uid: '3', 
context: {…}, 
dateEnv: DateEnv, 
theme: StandardTheme, 
view: DayGridView, …} 
el: a.fc-day-grid-event.fc-h-event.fc-event.fc-start.fc-end.fc-draggable 
eventRange: {def: {…}, ui: {…}, instance: {…}, range: {…}, isStart: true, …} 
firstCol: 5 
isEnd: true 
isStart: true 
lastCol: 6 
leftCol: 5 
level: 0 
rightCol: 6 
row: 0 
[[Prototype]]: Object

Solution

  • You can get the a element in your td like this:

    let a_elem = $('a.fc-day-grid-event', 'td.fc-event-container');

    Use dots (.) looking for class name.

    $(elem, other_elem) looks for the left hand elem in right hand elem. If you get an array back, you can use a_elem[0], provided there is only one element of this kind.

    Alter the value of colspan:

    $('td.fc-event-container').attr('colspan', your_new_colspan)