Как выбрать первый экземпляр класса изображения, который не скрыт - PullRequest
Новая
       3

Как выбрать первый экземпляр класса изображения, который не скрыт

0 голосов
/ 17 марта 2011

Обратите внимание, что для данной таблицы, приведенной ниже, в первой строке или первых нескольких строках может быть скрыт «imgProgress».

Не зная идентификатора первой строки, в которой не скрыто изображение, янужно иметь возможность выбрать только первый экземпляр imgProgress и скрыть его.

В таблице приложения будет еще много строк

Я пробовал: $ ('. Schedule-table .imgProgress: first'). FadeOut ('slow') и $ ('.imgProgress: first '). fadeOut (' slow '), но пока не повезло

Вот пример: 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>

Ответы [ 4 ]

3 голосов
/ 17 марта 2011

Получите первое изображение, которое не скрыто, 

$("img:not(:hidden))").eq(0);
2 голосов
/ 17 марта 2011

Есть несколько проблем с вашей разметкой.

Например, несколько элементов используют идентификатор #imgProgress.Идентификаторы в HTML должны быть уникальными.Вы не можете иметь два элемента с одинаковым идентификатором.Возможно, вы захотите изменить это на класс .imgProgress.

Как только это будет исправлено, использование псевдо-селектора :visible позволит вам скрыть первое видимое изображение: 

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

Также обратите внимание, что ваша демонстрационная версия jsFiddle использует MooTools , а не jQuery .При создании демонстрации jsFiddle необходимо выбрать правильную библиотеку JavaScript на левой панели инструментов.

Вот рабочая версия демонстрации jsFiddle с внесенными выше изменениями.

2 голосов
/ 17 марта 2011

Я думаю, что: 

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

должно быть то, что вы ищете?

<ч /> Отредактировано для устранения некоторых ошибок в разметке, из-за которых вышеперечисленное не заработало:

Проблемы:

  1. Несколько элементов с одинаковым id (id должен быть уникальным в документе).

  2. Отправленный код выбирал элементы 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

Ссылки:

0 голосов
/ 17 марта 2011

Судя по всему, ваш селектор ошибочен, и в вашем html-файле есть семантические ошибки.

У вас есть несколько изображений с идентификатором imgProgress, которые не будут проверяться.

Ваш селектор ищет теги с классом imgProgress.

Вам следует обновить html, чтобы удалить несколько идентификаторов и использовать классы, вместо этого ваш селектор должен работать.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...