Jquery - применить стиль CSS ко всем элементам в указанном div? - PullRequest
Новая
       3

Jquery - применить стиль CSS ко всем элементам в указанном div?

20 голосов
/ 30 июня 2011

У меня есть ситуация, когда я настраиваю мобильную тему для веб-сайта WordPress. Теперь я хотел бы получить любые элементы (p, divs, etcc) внутри div "#content" и применить css "width: 100%" к каждому из этих дочерних элементов.

Причина, по которой я хочу этого, заключается в том, что если кто-то устанавливает фиксированную ширину для div, мне нужно перезаписать его и вернуть на 100%, чтобы он не обрезался при просмотре на мобильном устройстве с меньшим экраном .

Я хотел бы знать, как этого можно добиться с помощью Jquery.

Я ценю любую помощь с этим. Спасибо

Ответы [ 6 ]

41 голосов
/ 30 июня 2011

Иногда jQuery является неправильным путем ...

Вы не должны использовать jQuery, если он не предоставляет законное преимущество. Часто использование стандартного JavaScript дает вам огромные преимущества в производительности. В вашей ситуации вы можете сделать что-то вроде следующего: 

var i,
    tags = document.getElementById("content").getElementsByTagName("*"),
    total = tags.length;
for ( i = 0; i < total; i++ ) {
  tags[i].style.width = '100%';
}

Онлайн демо: http://jsbin.com/otunam/3/edit

При этом метод jQuery также довольно прост. 

$('#content').find('*').width('100%');

Это опустится до каждого уровня #content, затрагивая все элементы.

Онлайн-демонстрация: http://jsbin.com/otunam/edit

Различия в производительности

Используя http://jsperf.com для сравнения различий в производительности, мы видим величину скорости, которую имеет сырой JavaScript по сравнению с альтернативой jQuery. В одном тесте JavaScript смог выполнить 300 000 операций за время, которое потребовалось jQuery для выполнения 20 000.

Test Now: http://jsperf.com/resizing-children

Но, почему JavaScript?

В конечном счете, вопрос о том, лучше ли jQuery или Raw JavaScript, - это «красная селедка», отвлекающая от реального вопроса - зачем вообще использовать скрипты? Если вы обнаружите мобильный браузер, загрузите новую таблицу стилей, содержащую мобильные правила: 

#content * { width:100% }
7 голосов
/ 30 июня 2011

Вот, пожалуйста: 

$('#content > *').css('width', '100%');

Вы также можете переопределить его в CSS: 

#content > * {
    width: 100% !important
}

!important обеспечит переопределение всех (включая встроенный стиль) определений.

3 голосов
/ 30 июня 2011

$("#content *").css("width","100%"); // все внутри # content

или

$("#content > *").css("width","100%"); // просто прямые потомки # content

2 голосов
/ 30 июня 2011 
<html>
<head>
<title>Document</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>

<script type="text/javascript">
$("document").ready(function(){
$("#container > *").css("color","red");
});
</script>

<style type="text/css">
.a { color: Navy; }
.b { color: Maroon; }

</style>
</head>
<body>

    <ul id="list1">
        <li ><a href="some.pdf">PDF</a></li>
        <li ><a href="some.pdf">d</a></li>
        <li ><a href="some.pdf">d</a></li>
        <li ><a href="some.pdf">d</a></li>
        <li ><a href="some.pdf">d</a></li>
    </ul>
<div id="container">    
<p>This is paragraph 1</p>
<p>This is paragraph 2</p>
<p>This is paragraph 3</p>
<p>This is paragraph 4</p>
</div>
</body>
</html>
1 голос
/ 30 июня 2011

В общем, исправление таблиц стилей с помощью JavaScript - плохая идея.Вы получите беспорядок автоматически измененных стилей.

К счастью, вы можете решить свою проблему в CSS: 

#content div,#content p,#content etcc {width: 100%;}

Вы можете сопоставить все прямые потомки, заменив пробелы на > (например, #content>div).

Если вы не хотите перечислять все имена элементов в #content, просто используйте #content * (или #content>* для всех прямых потомков).

1 голос
/ 30 июня 2011

CSS: 

#content > * { /* applies to all direct children of #content */
  width: 100%;
}

Если вам нужно использовать JavaScript / jQuery: 

jQuery("#content > *").css("width", "100%");
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...