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

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

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

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

Я ценю любую помощь в этом. Благодаря

Ответы

Ответ 1

Иногда 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 с исходным кодом JavaScript выше по сравнению с альтернативой jQuery. В одном тесте JavaScript смог выполнить 300 тыс. Операций за время, когда jQuery завершил 20 тыс.

Проверить сейчас: http://jsperf.com/resizing-children

Но почему JavaScript?

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

#content * { width:100% }

Ответ 2

Здесь вы идете:

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

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

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

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

Ответ 3

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

или

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

Ответ 4

<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>

Ответ 5

CSS

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

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

jQuery("#content > *").css("width", "100%");

Ответ 6

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

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

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

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

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