проверка значения атрибута html / css с использованием jQuery

Question

Я занимаюсь разработкой веб-сайта с использованием jQuery и других технологий. У меня проблема с селектором, как показано ниже.

Моя страница содержит div с id='tblData'. Внутри #tblData Я создал несколько таблиц с class='data'.

Внутри таблицы (.data) я создал несколько tr и td. Некоторые из этих тд имеют class='vis'.

Я изменяю свойство отображения этих td.vis динамически с block на none согласно моему требованию.

Когда страница загружается, я хочу перебрать все элементы. Мое условие - я хочу просмотреть все внутренние таблицы td (с class='data'), свойство display которых не равно none.

Я пишу следующий код, но он не работает.

$("div#tblData .data td[class='vis']").each(function (i) {  
    if ($(this).attr('display') != "none") {
        if ((i % 2) == 0) {
            $(this).removeClass("comparecontent2").removeClass("comparecontent1").addClass("comparecontent2");  
        } else {
            $(this).removeClass("comparecontent2").removeClass("comparecontent1").addClass("comparecontent1"); 
        }
    }
});  

alert($("div#tblData .data td[class='vis']").size()); // shows zero while 'alert($("div#tblData .data td").size())';
                                                      // returns right count.

Answer 1

Используйте одну из этих двух команд:

.is(":hidden")
.filter(":hidden")

http://api.jquery.com/hidden-selector/

например

  $(this).is(":hidden")

или

  $("td:hidden")

Answer 2

«display» - это не атрибут, это свойство стиля. Вы можете использовать this.style.display, но вместо этого вы можете выбрать :visible селектор jQuery . Обратите внимание, что селектор :visible проверяет не только свойство стиля display, но в основном те вещи, которые вы, вероятно, захотите проверить. Имеет больше накладных расходов, но если вы не находитесь в действительно узком цикле, это, вероятно, не имеет значения.

Так что либо:

if (this.style.display != "none")  

Или:

if ($(this).is(':visible'))