使用jQuery将容器的子元素设置为动态CSS宽度

Question

我正在尝试使用jQuery动态设置多个子元素的宽度。我的目标是：

1. 获取所需容器的数量（因为在DOM中会有多个.steps-container类的实例）
2. 遍历它们的子元素
3. 通过应用以下公式来设置它们的子元素的宽度：宽度 = 子元素数目 / 100

我有以下代码：

$(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'));

});

代码返回了一个错误："未捕获的类型错误：无法读取未定义的 'css' 属性"。

我错过了什么？

- Martin Velchevski

---

尝试将 CSS 属性分配给代表子元素数量的 count 变量。返回一步，将其分配给 el[i].children[j]。 - scrowler

Answer 1

children属性不正确。可以通过函数"children()"来检索子元素。请参见下面的示例：

$(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'));

});

相反地，您可能希望考虑这样编写，而不是使用数组元素。不确定这是否会提高或降低性能，但这就是我会写的方式：

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

如果您想要递归（不确定这是否符合您的需求），那么这就是您想要的：

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'));
});

我刚刚意识到您没有使用单一容器，因此如果您的宽度命令针对每个容器具体指定，则需要执行以下操作：

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));
    });
});

尝试一下。 :)

- Lawrence Johnson

---

我觉得由于我没有向子元素传递任何参数，所以我需要省略括号。当我使用.children()（带有括号）时，会出现以下错误："Uncaught TypeError: object is not a function"。不过还是谢谢你的回复！ - Martin Velchevski

我为你尝试做的事情添加了一些替代的写法的更新。这种方式更简洁，我认为它可以保持范围，并且让你能够轻松地使用所有的jQuery对象。 - Lawrence Johnson

坦白说，称你的代码“少言简洁”是一种极度低估。坦率地说，当我看到像你刚才给我的那样的代码，并将其与我的代码进行比较时，我感到非常尴尬：D不过，我渴望学习。谢谢你给出这么好的答案！现在一切都工作得很出色！ - Martin Velchevski

高五！很高兴我能帮到你 :) - Lawrence Johnson

Answer 2

你正在把一件非常简单的事情搞得很复杂。

• 要遍历容器，请使用jQuery的.each()
• 要设置子元素的宽度，利用jQuery天生的操作集合中所有元素的能力，而不需要自己编写迭代代码。

$(document).ready(function() {
    function setStepsWidth($containers) {
        $containers.each(function(i, el) {//iterate through the containers
            var $children = $(el).children();//find steps in current iteration's container.
            $children.width(100 / $children.length);//calculate width and apply it to all steps in current iteration's container.
        });
    }
    setStepsWidth($('.steps-container'));
});

或者，如果步骤是动态的，你可以选择附加一个'setStepsWidth'事件处理程序，可以在添加或删除步骤时触发。

例如：

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

DEMO

- Roamer-1888