javascript中的'this'关键字

Question

如果我有多个.packages类，如何为当前的.packages实现以下内容？

$('.packages').each(function(){
    var sizeOfLi = $(".packages:last > li").width();
});

Answer 1

var sizeOfAllLi = $(".packages:last > li").map(function() {
  return $(this).width();
});

map函数遍历jQuery集合并调用参数中提供的函数，this设置为当前元素。它将收集数组 jQuery集合中的所有返回值（请参阅注释）。如果您想要一个数组，请将.get()添加到上面的结尾。

在函数内部，需要重新包装this作为jQuery元素，以便我们可以使用jQuery的.width()，因为this是一个裸DOM元素。

Answer 2

$(".packages:last > li").each(function() {
   console.log($(this).width())
});

Answer 3

each答案很好，或者您可以使用map：

var liSizeArray = $(".packages:last > li").map(function() {
    return $(this).width();
}).get();

返回值将是一个数字数组，即各个li元素的宽度。

Answer 4

这总是适用于jQuery中的事件处理程序，它是你的主要功能选择器。

Answer 5

取决于你想做什么

如果您想在选中时获得li的宽度：

$(".packages:last > li").click(function(){
  sizeOfLi = $(this).width();
});

映射所有li大小的做法，如Amadan所说

var sizeOfAllLi = $(".packages:last > li").map(function() { return $(this).width(); })

this关键字指的是本例中的当前li