Home/ Questions/Q 4064814
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T15:54:15+00:00

Notice that for the given table below, the first row or the first many

  • 0

Notice that for the given table below, the first row or the first many rows may have the ‘imgProgress’ hidden.

Without knowing the id of the first row that does not have the image hidden, I need to be able to select only the first instance of ‘imgProgress’ and hide it.

There will be many more rows in the application table

I have tried:
$(‘.schedule-table .imgProgress:first’).fadeOut(‘slow’)
and
$(‘.imgProgress:first’).fadeOut(‘slow’)
but no luck yet

Here is a sample:
http://jsfiddle.net/Zp2S4/

<table id="ctl00_PlaceHolderMain_Table_Name" class="schedule-table" cellspacing="1" border="0" style="width:100%;"> 
<tr>     
<td class="resource-header"><span class="resource-header-text">Personnel</span></td>     
<td class="resource-header"><span class="resource-header-text">Office</span></td>     
<td class="dow"><span class="dow">Tue<br>01</span></td>
<td class="dow"><span class="dow">Wed<br>02</span></td>
<td class="dow"><span class="dow">Thu<br>03</span></td>
<td class="dow"><span class="dow">Fri<br>04</span></td>
<td class="weekend"><span class="weekend-text">Sat<br>05</span></td>
<td class="weekend"><span class="weekend-text">Sun<br>06</span></td>
<td class="dow"><span class="dow">Mon<br>07</span></td>
    <td class="dow"><span class="dow">Thu<br>31</span></td> 
</tr> 

    <tr class="DataRow" id="DataRow_3"> 
<td class="resource" style="display:none;"><span class="resource">3</span></td> 
<td class="resource" id="TD_Name">
    <div style="float:left;">Lname, Fname</div>
    <div style="float:right;">
        <img id="imgProgress" style="display:none;"  src="http://i193.photobucket.com/albums/z137/Pixel_Pete/microUS.gif" width="16" height="16" alt="Working..." />
    </div>        
</td> 
<td class="resource" id="TD_Office"><span>A6OK</span></td> 
<td class="dow" id="TD_1" onDblClick="location.href('myurl.aspx?p=8&amp;e=0&amp;d=01-Mar-2011&amp;o=8&amp;v=A6OK');"></td> 
<td class="dow" id="TD_2" onDblClick="location.href('myurl.aspx?p=8&amp;e=0&amp;d=02-Mar-2011&amp;o=8&amp;v=A6OK');"></td> 
<td class="dow" id="TD_3" onDblClick="location.href('myurl.aspx?p=8&amp;e=0&amp;d=03-Mar-2011&amp;o=8&amp;v=A6OK');"></td> 
<td class="dow" id="TD_4" onDblClick="location.href('.aspx?p=8&amp;e=0&amp;d=04-Mar-2011&amp;o=8&amp;v=A6OK');"></td> 
<td class="weekend" id="TD_5" onDblClick="location.href('.aspx?p=8&amp;e=0&amp;d=05-Mar-2011&amp;o=8&amp;v=A6OK');"></td> 
<td class="weekend" id="TD_6" onDblClick="location.href('myurl.aspx?p=8&amp;e=0&amp;d=06-Mar-2011&amp;o=8&amp;v=A6OK');"></td>  
    </tr>

<tr class="DataRow" id="DataRow_15"> 
<td class="resource" style="display:none;"><span class="resource">15</span></td> 
<td class="resource" id="TD_Name">
    <div style="float:left;">Lname, Fname</div>
    <div style="float:right;">
        <img id="imgProgress" style="display:none;"  src="http://i193.photobucket.com/albums/z137/Pixel_Pete/microUS.gif" width="16" height="16" alt="Working..." />
    </div>        
</td> 
<td class="resource" id="TD_Office"><span>A6OK</span></td> 
<td class="dow" id="TD_1" onDblClick="location.href('myurl.aspx?p=8&amp;e=0&amp;d=01-Mar-2011&amp;o=8&amp;v=A6OK');"></td> 
<td class="dow" id="TD_2" onDblClick="location.href('myurl.aspx?p=8&amp;e=0&amp;d=02-Mar-2011&amp;o=8&amp;v=A6OK');"></td> 
<td class="dow" id="TD_3" onDblClick="location.href('myurl.aspx?p=8&amp;e=0&amp;d=03-Mar-2011&amp;o=8&amp;v=A6OK');"></td> 
<td class="dow" id="TD_4" onDblClick="location.href('.aspx?p=8&amp;e=0&amp;d=04-Mar-2011&amp;o=8&amp;v=A6OK');"></td> 
<td class="weekend" id="TD_5" onDblClick="location.href('.aspx?p=8&amp;e=0&amp;d=05-Mar-2011&amp;o=8&amp;v=A6OK');"></td> 
<td class="weekend" id="TD_6" onDblClick="location.href('myurl.aspx?p=8&amp;e=0&amp;d=06-Mar-2011&amp;o=8&amp;v=A6OK');"></td>  
    </tr>    

<tr class="DataRow" id="DataRow_8"> 
<td class="resource" style="display:none;"><span class="resource">8</span></td> 
<td class="resource" id="TD_Name">
    <div style="float:left;">Lname, Fname</div>
    <div style="float:right;">
        <img src="http://i193.photobucket.com/albums/z137/Pixel_Pete/microUS.gif" width="16" height="16" alt="Working..." id="imgProgress" />
    </div>        
</td> 
<td class="resource" id="TD_Office"><span>A6OK</span></td> 
<td class="dow" id="TD_1" onDblClick="location.href('myurl.aspx?p=8&amp;e=0&amp;d=01-Mar-2011&amp;o=8&amp;v=A6OK');"></td> 
<td class="dow" id="TD_2" onDblClick="location.href('myurl.aspx?p=8&amp;e=0&amp;d=02-Mar-2011&amp;o=8&amp;v=A6OK');"></td> 
<td class="dow" id="TD_3" onDblClick="location.href('myurl.aspx?p=8&amp;e=0&amp;d=03-Mar-2011&amp;o=8&amp;v=A6OK');"></td> 
<td class="dow" id="TD_4" onDblClick="location.href('.aspx?p=8&amp;e=0&amp;d=04-Mar-2011&amp;o=8&amp;v=A6OK');"></td> 
<td class="weekend" id="TD_5" onDblClick="location.href('.aspx?p=8&amp;e=0&amp;d=05-Mar-2011&amp;o=8&amp;v=A6OK');"></td> 
<td class="weekend" id="TD_6" onDblClick="location.href('myurl.aspx?p=8&amp;e=0&amp;d=06-Mar-2011&amp;o=8&amp;v=A6OK');"></td>  
    </tr>

<tr class="DataRow" id="DataRow_5"> 
<td class="resource" style="display:none;"><span class="resource">5</span></td> 
<td class="resource" id="TD_Name">
    <div style="float:left;">Lname, Fname</div>
    <div style="float:right;">
        <img src="http://i193.photobucket.com/albums/z137/Pixel_Pete/microUS.gif" width="16" height="16" alt="Working..." id="imgProgress" />
    </div>        
</td> 
<td class="resource" id="TD_Office"><span>A6OK</span></td> 
<td class="dow" id="TD_1" onDblClick="location.href('myurl.aspx?p=8&amp;e=0&amp;d=01-Mar-2011&amp;o=8&amp;v=A6OK');"></td> 
<td class="dow" id="TD_2" onDblClick="location.href('myurl.aspx?p=8&amp;e=0&amp;d=02-Mar-2011&amp;o=8&amp;v=A6OK');"></td> 
<td class="dow" id="TD_3" onDblClick="location.href('myurl.aspx?p=8&amp;e=0&amp;d=03-Mar-2011&amp;o=8&amp;v=A6OK');"></td> 
<td class="dow" id="TD_4" onDblClick="location.href('.aspx?p=8&amp;e=0&amp;d=04-Mar-2011&amp;o=8&amp;v=A6OK');"></td> 
<td class="weekend" id="TD_5" onDblClick="location.href('.aspx?p=8&amp;e=0&amp;d=05-Mar-2011&amp;o=8&amp;v=A6OK');"></td> 
<td class="weekend" id="TD_6" onDblClick="location.href('myurl.aspx?p=8&amp;e=0&amp;d=06-Mar-2011&amp;o=8&amp;v=A6OK');"></td>  
    </tr>
<tr>     
<tr class="DataRow" id="DataRow_11"> 
<td class="resource" style="display:none;"><span class="resource">11</span></td> 
<td class="resource" id="TD_Name">
    <div style="float:left;">Lname, Fname</div>
    <div style="float:right;">
        <img src="http://i193.photobucket.com/albums/z137/Pixel_Pete/microUS.gif" width="16" height="16" alt="Working..." id="imgProgress" />
    </div>        
</td> 
<td class="resource" id="TD_Office"><span>A6OK</span></td> 
<td class="dow" id="TD_1" onDblClick="location.href('myurl.aspx?p=8&amp;e=0&amp;d=01-Mar-2011&amp;o=8&amp;v=A6OK');"></td> 
<td class="dow" id="TD_2" onDblClick="location.href('myurl.aspx?p=8&amp;e=0&amp;d=02-Mar-2011&amp;o=8&amp;v=A6OK');"></td> 
<td class="dow" id="TD_3" onDblClick="location.href('myurl.aspx?p=8&amp;e=0&amp;d=03-Mar-2011&amp;o=8&amp;v=A6OK');"></td> 
<td class="dow" id="TD_4" onDblClick="location.href('.aspx?p=8&amp;e=0&amp;d=04-Mar-2011&amp;o=8&amp;v=A6OK');"></td> 
<td class="weekend" id="TD_5" onDblClick="location.href('.aspx?p=8&amp;e=0&amp;d=05-Mar-2011&amp;o=8&amp;v=A6OK');"></td> 
<td class="weekend" id="TD_6" onDblClick="location.href('myurl.aspx?p=8&amp;e=0&amp;d=06-Mar-2011&amp;o=8&amp;v=A6OK');"></td>  
    </tr>

</table>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I think that:

    $('.schedule-table .imgProgress:visible:first').fadeOut('slow');

    should be what you’re looking for?

    Edited to address some of the faults in the mark-up, that prevented the above from working:

    Problems:

    1. Multiple elements with the same id (an id must be unique within the document).

    2. The code posted was selecting elements of class ‘imgProgress’, which returned no results since the only attribute containing ‘imgProgress’ was the id.

      $('img:visible:first').each(
    function(){
        $(this).addClass(this.id); // takes the images id, and adds it as a class
        $(this).removeAttr('id'); // removes the id attribute.
    });

$('img.imgProgress:visible:first').fadeOut(1000);

    JS Fiddle

    References:

    • 0