1 reply [Last post]
mygodwalther
mygodwalther's picture
Offline
newbie
Last seen: 3 years 19 weeks ago
Timezone: GMT+2
Joined: 2016-03-31
Posts: 1
Points: 2

Hello community,

I try to filter some objects in a timetable / grid. I don't have access to edit the making of the grid since it comes from a website construction kit. (Hence I know less than few about coding with CSS.)
The generated grid looks like this:

<div id="grid1459411200000" class="gridSlot gridBusy gridAm" > <span> 10:00 </span> </div>
<div id="grid1459413000000" class="gridSlot gridBusy gridAm gridNoFree" > <span> 10:30 </span> </div>
<div id="grid1459414800000" class="gridSlot gridBusy gridAm gridNoFree" > <span> 11:00 </span> </div>
<div id="grid1459416600000" class="gridSlot gridBusy gridAm" > <span> 11:30 </span></div>
<div id="grid1459418400000" class="gridSlot gridBusy gridPm gridNoFree" ><span> 12:00 </span></div>
<div id="grid1459420200000" class="gridSlot gridBusy gridPm gridNoFree" ><span> 12:30 </span></div>

I can hide all elements with the class gridNotFree with div.gridNoFree {display: none;}, but that hides too much in some circumstances.

In my example I want to filter the <div> elements, in which the <span> equals 10:30, 11:00, 12:00 or 12:30.
Is there a way to do that?

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 weeks 2 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

You may have to use

You may have to use JavaScript to target the specific text element you don't want hidden.

Here's a untested jQuery example:

$('.gridNoFree span').each(
  function(){
     if($(this).text() == '12:30') {
       $(this).parent().css('display', 'block');
     }
  }
);