.is (": visible") после поиска

Question

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

У меня есть dynamicaly загруженную часть страницы, которая выглядит как:

<div id="box"> 

    <div class="colored"> 
    <input type="checkbox" value="f01" name="mycheckbox"> 
    <!-- some content --> 
    <div> 

    <div class="colored"> 
    <input type="checkbox" value="f02" name="mycheckbox"> 
    <!-- some content --> 
    <div> 

    <!-- .... --> 


</div> 

Это означает, скажем, вещи в какой-то галерее. Каждый класс = «цветной» div может быть ВИДИМЫМ или СКРЫТОМ. Позволяет сказать, это просто фильтр, как я хочу, чтобы иметь видимый только класс = «окрашен в желтый цвет» дивы

А теперь суть проблемы: мне нужно проходным всего BOX элемента, найти все флажки и по каждому флажку «спросите его», если он виден, и если это правда, проверьте его.

Unforunately, это не работает:

function checkallfav() { 
    $("#box").find('input[type=checkbox]').each(function() { 
     if (this.is(":visible")) { 
      this.checked = true; 
     } 
    }); 
} 

//And this doesn't work as well 
function checkallfav() { 
    $("#box").find('input[type=checkbox]').is(":visible").each(function() { 
     this.checked = true; 
    }); 
} 

Проблема заключается в том, что функция FIND возвращает весь элемент, я попытался console.debug (это); и в firebug, ответ был весь элемент html

Итак, пожалуйста, у кого есть решение?

Answer 1

Используйте :visible селектор на флажке самостоятельно. Использование :visible на селекторе будет фильтровать только видимые элементы, а затем prop может быть непосредственно использован на этих флажках.

$("#box").find('input[type=checkbox]:visible').prop('checked', true); 

Код также можно сократить, как

$('#box :checkbox:visible').prop('checked', true); 

Answer 2

Здесь this относится к родному объекту DOM, и они не имеют .is() функции его функция JQuery, таким образом, должна использовать с объектом JQuery. Таким образом, следует использовать $(this).is(":visible").

$("#box").find('input[type=checkbox]').each(function() { 
    if ($(this).is(":visible")) { 
     this.checked = true; 
    } 
}); 

Более простой способ добиться того, с помощью @ рекомендации Tushar в

Answer 3

Вы можете использовать prop() параметр функции тоже:

$("#box").find(':checkbox').prop('checked',function(){ 
    return $(this).is(':visible'); 
}); 

Это, кстати снимите любой скрытый флажок (если требуется) ,

Answer 4

Это может быть достигнуто с .filter() способом:

$("#box").find('input[type=checkbox]').filter(':visible').prop('checked', true);