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

Set dynamic css width to children of a container using jQuery

本文关键字：设置 元素 动态 css 宽度 jQuery 使用      更新时间：2023-09-26

我正在尝试使用jQuery动态设置一些子元素的宽度。我要做的是如下

  1. 获取所需容器的计数(因为我将在DOM中拥有多个.steps-container类的实例)
  2. 遍历它们的子节点
  3. 应用以下公式设置其子元素的宽度:width = 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'));
});

代码返回一个错误:"Uncaught TypeError: Cannot read property 'css' of undefined "

我错过了什么?

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

试试。:)

你在小题大做。

  • 迭代容器，使用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);
    });
});

相关文章：