Using jQuery, adjust the width of child elements within a container by applying dynamic CSS styling

Question

Using jQuery, adjust the width of child elements within a container by applying dynamic CSS styling

I am attempting to dynamically set the width of several child elements using jQuery. Here is what I am trying to achieve:

Obtain the count of the desired containers (since there will be multiple instances of the .steps-container class in the DOM)
Iterate through their children
Set the width of their children using the formula: width = 100 / number of children

This is the code I have:

$(document).ready(function() {

    var setStepsWidth = function(stepsContainer) {

        var el = stepsContainer,
            count = stepsContainer.length,
            childrenCount = 0;

        for( var i = 0; i < count; i++ ) {

            childrenCount = el[i].children.length;

            var containerChildren = el[i].children;
            console.log(containerChildren);

            for(var j = 0; j < childrenCount; j++) {

                //test to see if it's working
                childrenCount[j].css('background-color', 'red');

            }

        }
    };

    setStepsWidth($('.steps-container'));

});

When running the code, I encounter an error: "Uncaught TypeError: Cannot read property 'css' of undefined"

What could I be overlooking?

javascript jquery css

Answer 1

Answer №1

There seems to be an issue with the children property. You should use the function "children()" to retrieve the children. Check out the example below:

$(document).ready(function() {
var setStepsWidth = function(stepsContainer) {

    var el = stepsContainer,
        count = stepsContainer.length,
        childrenCount = 0;

    for( var i = 0; i < count; i++ ) {

        childrenCount = el[i].children().length;

        var containerChildren = el[i].children();
        console.log(containerChildren);


        for(var j = 0; j < childrenCount; j++) {

            //test to see if it's working
            childrenCount[j].css('background-color', 'red');

        }


    }
};

setStepsWidth($('.steps-container'));

});

Alternatively, you can rewrite it like this without using array elements. It may or may not have a performance impact, but here's an alternative approach:

jQuery(document).ready(function() {
    function _stepsWidth(__stepsContainer) {
        jQuery.each(__stepsContainer.children(), function() {
            jQuery(this).css('background-color', 'red');
        });
    }
    _stepsWidth(jQuery('.steps-container'));
});

If you're looking for recursion, you can implement it like this:

jQuery(document).ready(function() {
    function _stepsWidth(__stepsContainer) {
        jQuery.each(__stepsContainer.children(), function() {
            jQuery(this).css('background-color', 'red');
            _stepsWidth(jQuery(this));
        });
    }
    _stepsWidth(jQuery('.steps-container'));
});

Also, if you have multiple containers and want specific styling for each, you can try this:

jQuery(document).ready(function() {
    function _stepsWidth(__stepsContainer) {
        jQuery.each(__stepsContainer.children(), function() {
            jQuery(this).css('background-color', 'red');
        });
    }
    jQuery.each(jQuery('.steps-container'), function() {
        _stepsWidth(jQuery(this));
    });
});

Give it a try and see how it works. :)

Answer 2

There seems to be an issue with the children property. You should use the function "children()" to retrieve the children. Check out the example below:

$(document).ready(function() {
var setStepsWidth = function(stepsContainer) {

    var el = stepsContainer,
        count = stepsContainer.length,
        childrenCount = 0;

    for( var i = 0; i < count; i++ ) {

        childrenCount = el[i].children().length;

        var containerChildren = el[i].children();
        console.log(containerChildren);


        for(var j = 0; j < childrenCount; j++) {

            //test to see if it's working
            childrenCount[j].css('background-color', 'red');

        }


    }
};

setStepsWidth($('.steps-container'));

});

Alternatively, you can rewrite it like this without using array elements. It may or may not have a performance impact, but here's an alternative approach:

jQuery(document).ready(function() {
    function _stepsWidth(__stepsContainer) {
        jQuery.each(__stepsContainer.children(), function() {
            jQuery(this).css('background-color', 'red');
        });
    }
    _stepsWidth(jQuery('.steps-container'));
});

If you're looking for recursion, you can implement it like this:

jQuery(document).ready(function() {
    function _stepsWidth(__stepsContainer) {
        jQuery.each(__stepsContainer.children(), function() {
            jQuery(this).css('background-color', 'red');
            _stepsWidth(jQuery(this));
        });
    }
    _stepsWidth(jQuery('.steps-container'));
});

Also, if you have multiple containers and want specific styling for each, you can try this:

jQuery(document).ready(function() {
    function _stepsWidth(__stepsContainer) {
        jQuery.each(__stepsContainer.children(), function() {
            jQuery(this).css('background-color', 'red');
        });
    }
    jQuery.each(jQuery('.steps-container'), function() {
        _stepsWidth(jQuery(this));
    });
});

Give it a try and see how it works. :)

Answer 3

Answer №2

You seem to be overcomplicating something that is actually quite straightforward.

If you need to loop through the containers, utilize jQuery's .each() method
To adjust the width of child elements, take advantage of jQuery's ability to automatically apply changes to all elements in a selection, eliminating the need for manual iteration.

$(document).ready(function() {
    function adjustChildrenWidth($containers) {
        $containers.each(function(i, el) {//loop through the containers
            var $children = $(el).children();//get children within the current container
            $children.width(100 / $children.length);//calculate and apply width to all children in the current container
        });
    }
    adjustChildrenWidth($('.steps-container'));
});

Alternatively, if the child elements are dynamic, consider using an event handler like 'setChildrenWidth' that can be triggered whenever a new child is added or removed.

For instance :

$(document).ready(function() {
    $(document).on('setChildrenWidth', '.steps-container', function() {
        var $children = $(this).children();
        $children.width(100 / $children.length);
    });
});

DEMO

Answer 4

You seem to be overcomplicating something that is actually quite straightforward.

If you need to loop through the containers, utilize jQuery's .each() method
To adjust the width of child elements, take advantage of jQuery's ability to automatically apply changes to all elements in a selection, eliminating the need for manual iteration.

$(document).ready(function() {
    function adjustChildrenWidth($containers) {
        $containers.each(function(i, el) {//loop through the containers
            var $children = $(el).children();//get children within the current container
            $children.width(100 / $children.length);//calculate and apply width to all children in the current container
        });
    }
    adjustChildrenWidth($('.steps-container'));
});

Alternatively, if the child elements are dynamic, consider using an event handler like 'setChildrenWidth' that can be triggered whenever a new child is added or removed.

For instance :

$(document).ready(function() {
    $(document).on('setChildrenWidth', '.steps-container', function() {
        var $children = $(this).children();
        $children.width(100 / $children.length);
    });
});

DEMO

Using jQuery, adjust the width of child elements within a container by applying dynamic CSS styling

Answer №1

Answer №2

Similar questions

Currently, I'm attempting to figure out a way to create a CSS string in my MVC ASP.NET project. Any ideas or suggestions are greatly appreciated

Stylish Zigzag Border with a Patterned Background

Could you explain the distinction among req.path, req.params, and req.query?

Node is looking for a callback function, but instead received something that is undefined

Analyze Javascript code and monitor every variable alongside their corresponding values

Modify the restriction adjustment upon applying an additional filter

retrieving data from a php file using ajax for a post request

Using ng-repeat can cause conflicts with jQuery function calls

Attempting to extract data from an HTML table and store it in an array using JavaScript with the help of jQuery

create the text with double bold - adjusted pages

Jquery Menu featuring subitems aligned to the right

Let's explore further - delving into JSON & array manipulation using the foreach loop in Pure JavaScript

Issues with CSS transitions not functioning properly following the use of toggleClass()

Confusion surrounding the purpose of an AngularJS controller function

Tips for aligning two divs of varying sizes side by side

Is there a way to prevent Angular Material Buttons from overlapping a sticky bar when scrolling?

Storing filtered data objects for future use

When using DataTables ajax.reload with pagination enabled, the table content jumps to the bottom of the page

A step-by-step guide on utilizing the reduce function to calculate the overall count of a user's GitHub repositories

Is having async as false really detrimental?