jQuery“this”选择器没有按预期工作

时间:2013-11-08 17:44:42

标签: jquery

我正在尝试根据子元素数乘以每个子元素的常量宽度来设置元素的宽度。我在页面上有多个这些元素,每个元素都有可变数量的子元素。

 $(".parent").css("width", ($(this).children().length * 150) + "px");

这似乎不像我预期的那样有效。我希望这能找到每个父类,然后根据各个子元素的数量来计算宽度。

3 个答案:

答案 0 :(得分:2)

也可能:

$(".parent").css("width", function () { 
   return ($(this).children().length * 150) + "px") 
});

jQuery .css()

答案 1 :(得分:1)

它没有按预期工作,因为this指向当前的函数范围,而不是.parent。为了实现您的目标,您可以使用each

$(".parent").each(function() {
    $(this).css("width", ($(this).children().length * 150) + "px");
});

答案 2 :(得分:1)

以下是代码运行的顺序,包含变量,因此可以明确顺序:

var $this = $(this);                // Wrap whatever the current value of `this`
                                    // is in a jQuery object; note this has
                                    // nothing to do  with ".parent"
var $children = $this.children();   // Get its children
var width = $children.length * 150; // Calculate the width
width = width += "px";              // Put a "px" on it (you don't need this)
var $parent = $(".parent");         // Find the element(s) with class "parent"
$parent.css("width", width);        // Apply the width to it

相反,你可能想要:

var $parent = $(".parent");
$parent.css("width", $parent.children().length * 150); // You don't need "px"