[英]Set dynamic css width to children of a container using jQuery
I am trying to set the width of a number of child elements dynamically using jQuery. 我正在尝试使用jQuery动态设置许多子元素的宽度。 What I am trying to do is the following
我想做的是以下
I have this: 我有这个:
$(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'));
});
The code returns an error: "Uncaught TypeError: Cannot read property 'css' of undefined " 代码返回错误:“未捕获的TypeError:无法读取未定义的属性'css'”
What am I missing? 我想念什么?
The children property is incorrect. children属性不正确。 The children are retrieved via function "children()".
通过函数“ children()”检索子代。 See 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 may want to consider writing it like this as opposed to using array elements. 另外,您可能需要考虑像这样编写它,而不是使用数组元素。 Not sure if this is a performance gain or decrease, but it's how I'd write it:
不知道这是性能的提高还是降低,但是这就是我的写法:
jQuery(document).ready(function() {
function _stepsWidth(__stepsContainer) {
jQuery.each(__stepsContainer.children(), function() {
jQuery(this).css('background-color', 'red');
});
}
_stepsWidth(jQuery('.steps-container'));
});
If you want recursion (not sure if that's what you're after), this is what you want: 如果要递归(不确定是否要这样做),这就是您想要的:
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'));
});
I also just realized that you're not using a single container, so if your width commands are specific to each container, you'd want to do this: 我还刚刚意识到您没有使用单个容器,因此,如果您的width命令是特定于每个容器的,则需要这样做:
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));
});
});
Try it. 试试吧。 :)
:)
You are making heavy weather of something very simple. 您正在使天气变得很简单。
.each()
.each()
$(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'));
});
Alternatively, if the steps are dynamic, you might choose to attach a 'setStepsWidth' event handller that can be fired whenever a step is added or removed. 或者,如果步骤是动态的,则可以选择附加一个“ setStepsWidth”事件处理程序,该事件处理程序可在添加或删除步骤时触发。
For example : 例如 :
$(document).ready(function() {
$(document).on('setStepsWidth', '.steps-container', function() {
var $children = $(this).children();
$children.width(100 / $children.length);
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.