Как выбрать по стилям CSS в jQuery? - PullRequest
Новая
       25

Как выбрать по стилям CSS в jQuery?

8 голосов
/ 04 сентября 2010

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

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

Ответы [ 4 ]

15 голосов
/ 04 сентября 2010

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

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

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

8 голосов
/ 04 сентября 2010

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

$.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 голос
/ 22 декабря 2015

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

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

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

Документы .

1 голос
/ 30 апреля 2012 
<!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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...