jquery выбор элементов без видимых потомков - PullRequest
Новая
       36

jquery выбор элементов без видимых потомков

8 голосов
/ 08 мая 2009

Вот моя цель: сделать что-то для элемента, <optgrooup>, если все его дочерние элементы невидимы.

Мой код ниже обведен красным, если он имеет любых невидимых детей. Но я хочу сделать это только в том случае, если все дети невидимы. Если у элемента есть какие-либо видимые дочерние элементы, не выделяйте его.

Как мне настроить селектор jQuery для этого?

Заранее спасибо. 

<select multiple="multiple" name="availableInstanceId" id="availableInstanceId">
<optgroup label="Option Group 1">
   <option >visible item 1</option>
   <option >visible item 2</option>
</optgroup>
<optgroup label="Option Group 2 - Should be highlighted">
   <option style="display:none;">invisible A</option>
   <option style="display: none">invisible B</option>
</optgroup>

<optgroup label="Option Group 3 - Should not be highlighted">
  <option >visible C</option>
  <option style="display: none">invisible D</option>
</optgroup></select>

<script type="text/javascript">
var filterOptions = function(e) {
  // Goal: highlight the <optgroup>'s that have *only* invisible children
  $( '#availableInstanceId > * > *:hidden').parent().css("border","3px solid red");
} 
$(document).ready(function() {
  filterOptions();
});
</script>

Скриншот изображения здесь: http://img144.imageshack.us/img144/556/selectexample.gif

Ответы [ 6 ]

13 голосов
/ 08 мая 2009

Если вы хотите исключить элементы без дочерних элементов: 

 $(":has(*):not(:has(:visible))")

Рабочий пример.

ОБНОВЛЕНИЕ: Это намного лучше, чем мой первоначальный ответ: 

$(":hidden").parent().not( $(":visible").parent() )
2 голосов
/ 09 мая 2009

Это намного лучше, чем мой оригинальный ответ : 

$(":hidden").parent().not( $(":visible").parent() )
1 голос
/ 21 апреля 2011

// ответ на вопрос об изменении css по желанию 

    if($.browser.msie || $.browser.safari){

        $('optgroup:not(:has(:hidden))').css("border","3px solid red");

    } else {

        $('optgroup:not(:has(:visible))').css("border","3px solid red");

    }

// удалить пустой пример optgroups 

    if($.browser.msie || $.browser.safari){

        $('optgroup:not(:has(:hidden))').remove();

    } else {

        $('optgroup:not(:has(:visible))').remove();

    }
1 голос
/ 09 мая 2009

Кредит переходит на Джед Шмидт . Следующий код работает в IE8.

Обратите внимание, что IE8 на самом деле не скрывает элементы <option>, несмотря на стиль display: none. Также IE8, кажется, не принимает border стилей для <optgroup> элементов.

Рабочий образец: http://jsbin.com/aquya (редактируется через http://jsbin.com/aquya/edit)

$(document).ready(function() {
  // Prevent CSS inherits
  $("option").css('backgroundColor', 'white')

  $("option")
    .filter(function(){
      return this.style.display == 'none';
    })
    .parent()
    .not($('option').filter(function(){
      return this.style.display != 'none';
    }).parent())
    .css('backgroundColor', 'blue')
    .css('border', '1px solid red'); //this doesn't work in IE8
});
1 голос
/ 08 мая 2009

Как насчет двух строк, чтобы сделать это? Один, чтобы включить его для каждого отдельного элемента, и один, чтобы снова выключить его для каждого с видимым потомком? 

$('#availableInstanceId > *').css("border","3px solid red");
$('#availableInstanceId > * > *:visible').parent().css("border","none");
0 голосов
/ 08 мая 2009

Вам нужно сравнить массив всех: visible и: hidden

вот какой-то псевдокод 

if ($("#element:hidden").length == $("#element:visible").length) {
  // Do  stuff
} ...
...