Question

我正在努力用jquery检索div数组中div的宽度。通常我会做这样的事情......

$("#divID").width()

哪种方法可以正常工作，但这次我必须遍历一个div列表，这会返回错误＆＃34; Uncaught TypeError：$（...）[0] .width不是函数＆＃34 ;

$("#parentID .childClass")[0].width()
$("#parentID .childClass")[1].width()
etc...

使用.width（作为属性而不是函数）只返回＆＃34; undefined＆＃34;。

任何想法我做错了什么？

编辑 - 道歉 - 我最初省略了.childClass标识符，这是导致我的jquery选择正确返回所有div列表的原因。我的问题是如何返回一个这样的div的宽度

Answer 1

您必须使用eq才能在指定的索引处获得div。这是一个示例：

eq方法将匹配元素集合减少到指定索引处的元素。

var length=$('.parentClass').length;
for(i=0;i<length;i++){
   console.log($('.parentClass').eq(i).width());
}

.parentClass{
   width:50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parentClass"></div>
<div class="parentClass"></div>

另一种解决方案是使用each()方法。

$("#parentID .childClass").each(function(){
    //code
});

Answer 2

您可以编写一个jQuery插件来执行此操作。只需在父元素中找到子元素并找到nᵗʰ项。

(function($) {
  $.fn.nthChild = function(childSelector, n) {
    return this.find(childSelector).eq(n);
  };
  $.fn.nthChildWidth = function(childSelector, n) {
    return this.nthChild(childSelector, n).width();
  };
})(jQuery);

console.log($('#parent-id').nthChildWidth('.child-class', 0));
console.log($('#parent-id').nthChildWidth('.child-class', 1));

.as-console-wrapper { top: 0; max-height: 100% !important; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent-id">
  <div class="child-class" style="width:200px"></div>
  <div class="child-class" style="width:300px"></div>
</div>

Jquery从列表

2 个答案: