Question

请注意，对于下面给定的表格，第一行或前几行可能隐藏了'imgProgress'。

在不知道没有隐藏图像的第一行的id的情况下，我需要能够只选择'imgProgress'的第一个实例并隐藏它。

应用程序表中会有更多行

我试过了： $（'。schedule-table .imgProgress：first'）。fadeOut（'slow'）和 $（ 'imgProgress：第一 '）淡出（' 慢'）。但没有运气

<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>

Answer 1

获取第一张未隐藏的图片，

$("img:not(:hidden))").eq(0);

Answer 2

我认为：

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

应该是你想要的吗？

<小时/> 已编辑以解决标记中的一些错误，导致无法正常工作：

问题：

文档中具有相同id（id 的多个元素必须 唯一。

发布的代码是选择class'imgProgress'的元素，由于唯一包含'imgProgress'的属性是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

参考文献：

addClass()。

removeAttr()。

:visible selector。

Answer 3

标记存在一些问题。

首先，多个元素使用id #imgProgress。 HTML中的ID 必须才是唯一的。您不能拥有两个具有相同ID的元素。您可能希望将其更改为类.imgProgress。

修复后，使用:visible pseudo-selector可以隐藏第一个可见图片：

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

另请注意，您的jsFiddle演示使用的是MooTools，而不是jQuery。在创建jsFiddle演示时，您必须确保从左侧工具栏中选择适当的JavaScript库。

Here is a working version of the jsFiddle demo已实施上述更改。

Answer 4

从它的外观来看，你的选择器是完全错误的，并且你的html中存在语义错误。

您有多个图像，其ID为imgProgress，无法验证。

你的选择器正在寻找带有imgProgress类的标签。

你应该更新你的html以删除多个id并使用类，而不是你的选择器应该工作。

jQuery如何选择未隐藏的图像类的第一个实例

4 个答案: