Member Avatar for aldm

Hi,

I have a div element which have a lot of other divs inside. Inside that divs are also div elements. Now, how can I change width of every div element inside wanted div using jquery (all levels of children). Example

<div id="1">
    <div id="2">
        <div id="3">
        </div>
    </div>
    <div id="4">
    </div>
</div>

Now, I want to change width of all those divs.

Thanks in advance,

Amer

  • 3 Contributors
  • 4 Replies
  • 257 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by MartinRinehart

Dani AI

Generated

A quick, practical follow-up that builds on ’s example and ’s selector idea: use jQuery’s traversal methods rather than repeating a combined selector. Select the container, then target all descendant divs with .find() and set the width in one operation (this is efficient and clear).

var $container = $('#container');      // use a descriptive id
$container.find('div').css('width', '240px');

To include the container itself as well, union the set with .addBack() (modern jQuery) or use .andSelf() on very old versions:

$container.find('div').addBack().css('width', '240px');

If you prefer plain DOM (no jQuery) or need maximum speed, iterate returned elements:

var c = document.getElementById('container');
var divs = c.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
  divs[i].style.width = '240px';
}

Practical tips and gotchas:

  • .children('div') only gets immediate children; .find('div') covers all nested levels.
  • For large trees, prefer adding a class and defining the width in CSS (faster and cleaner) rather than repeatedly touching inline styles.
  • Avoid IDs that start with digits — they can complicate CSS selectors. If you must, select with getElementById() or an attribute selector like $('[id="1"]').
  • When widths vary per element, use .each() to compute values per node.

This expands on ’s selector approach and answers the “all levels of children” part of ’s question while keeping the code maintainable and performant.

Recommended Answers

All 4 Replies

Member Avatar for Airshow

Aldm,

If you want to exclude the outermost div then try:

$("div#1 div").css('width', 500);

If you want to include the outermost div then try:

$("div#1, div#1 div").css('width', 500);

Airshow

Member Avatar for MartinRinehart

Airshow,

For the benefit of the rest of us, would you mind explaining that $() syntax?

Thanks!

Member Avatar for Airshow

Martin,

Aldm asked for a jQuery solution.

$ is a synonym for jQuery and the strings in parentheses immediately following a $ are selectors.

jQuery selectors are a very powerful way to select one or more dom elements using one of three syntaxes - css, html or xpath.

A basic $("selector") statement returns a jQuery object with an internal array containing references to each selected dom element (in dom order). The returned object can be assigned to a variable, eg. var foo = $("selector") , but far more significantly, jQuery provides for "method chaining".

For example, $("p.old").css('background-color','#666').parent().find("button.delete").show() - which reads, "find all paragraphs with class='old', set their background color to dark grey, then find the parent element of each of these paragraph's, then find a button with class="delete" within each parent element, and show it".

The range of available selectors combined with a very comprehensive set of native methods, plus plugins, makes jQuery very very powerful. As they say "write less, do more". If you take to it, then it is also quite addictive.

jQuery
My favourite jQuery book - jQuery Pocket Reference - reviews.

Airshow

Member Avatar for MartinRinehart

Thanks, Airshow!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.