博客

要在jQuery中计算文档中的每个元素，包括头部主体，可以通过以下步骤：

1. 使用 jQuery 的选择器选取需要计算的元素。此处可以选择所有元素。

var elements = $('*');

1. 遍历选取到的元素列表，使用 jQuery 提供的方法获取每个元素的大小，位置等信息。

elements.each(function() {
   var ele = $(this);
   // 获取元素宽度
   var width = ele.width();
   // 获取元素相对于文档的位置
   var offset = ele.offset();
});

1. 将每个元素的大小和位置信息保存到对象中，将对象列表返回。

var elementsList = elements.map(function() {
   var ele = $(this);
   // 获取元素宽度
   var width = ele.width();
   // 获取元素相对于文档的位置
   var offset = ele.offset();
   // 将元素信息保存到对象中
   return {
      element: ele,
      width: width,
      offset: offset
   };
}).get();

1. 处理元素列表返回的结果，在需要的地方展现元素信息。

示例1：在控制台展示每个元素的宽度和位置信息。

var elementsList = $('*').map(function() {
   var ele = $(this);
   var width = ele.width();
   var offset = ele.offset();
   return {
      element: ele,
      width: width,
      offset: offset
   };
}).get();

for (var i = 0; i < elementsList.length; i++) {
   console.log("元素" + i + "：宽度 " + elementsList[i].width + ", 位置 " + elementsList[i].offset.top + ", " + elementsList[i].offset.left);
}

示例2：将文档中第一个 <h1> 添加一个类名。

var h1 = $('h1').first();
h1.addClass("new-class");