2010-09-03 2 views
7

Я пытаюсь найти все родительские элементы, которые имеют стиль CSS display:none. Однако я не могу заставить его работать. Вот что я получил:Как выбрать стили CSS в jQuery?

var $parents = $(...).parents("[css=display:none]"); 

ответ

14

Если вы хотите, те, которые фактическиdisplay: none; (не только возможно содержали в другом display: none;), вы можете использовать .filter() и .css(), чтобы получить эти родители, как это :

var $parents = $(...).parents().filter(function() { 
        return $(this).css('display') == 'none'; 
       }); 

Это заставляет родителей, затем фильтрует их, чтобы получить только те, которые display: none; на этого конкретного родителя.

6

@Nick's solution - очень простой и простой способ достижения вашей цели. Это также, вероятно, самый эффективный метод. Однако, для полноты и удобства (если вы делаете это много), это также можно создать свой собственный селектор:

$.expr[':'].css = function(obj, index, meta, stack) { 
    var args = meta[3].split(/\s*=\s*/); 
    return $(obj).css(args[0]) == args[1]; 
} 

// Then we can use our custom selector, like so: 
$("#myElement").parents(":css(display=none)").show(); 

Пример - http://jsfiddle.net/V8CQr/.

Посмотреть более подробную информацию о создании пользовательских селекторов по адресу:

http://www.jameswiseman.com/blog/2010/04/19/creating-a-jquery-custom-selector/

1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('a').parents('div[style*="display: none"], [style*="display:none"]').show(); 
     }); 
    </script> 
</head> 
<body> 
    <div class="Test" style="color: Red; display: none;"> 
     aaa <a href="#test">test</a><br /> 
    </div> 
    <div class="Test" style="color: Aqua;"> 
     bbb <a href="#test">test</a><br /> 
    </div> 
    <div class="Test" style="font-size: 15px; display: none;"> 
     ccc <a href="#test">test</a><br /> 
    </div> 
</body> 
</html> 
+0

для живой демонстрации см. Эту ссылку: http://jsfiddle.net/nanoquantumtech/xYdRy/ – Thulasiram

1

Вы были близки:

$(...).parents('[style*="display: none"]'); 

Примечание: это делает поиск подстрок на элементе значения атрибутов, так что это не как и решение для фильтра $(this).css(...), показанное выше.

docs.

Смежные вопросы