Question

我的网站上有一个带搜索功能的标题栏。我实现的其中一个功能包括查找结果并调整包含它们的框的大小。

这个标题栏的一页我的功能完美无缺：

$(".suggestionCategory").each(function() {
        $(this).find(".suggestionCategoryName").outerHeight($(this).find(".suggestionCategoryValues").height());
});

但另一方面，我收到以下错误消息：

未捕获的TypeError：无法读取未定义的属性“height”

在打破和检查后，我可以看到

的结果

$(this).find(".suggestionCategoryValues")

返回非常不同的东西。在正常运行的页面上：

$(this).find(".suggestionCategoryValues")

评估为：

[
<div class="suggestionCategoryValues">…</div>
]

但是在失败的页面上，它评估为：

[
b.fn.b.init[1]
  0: div.suggestionCategoryValues
  context: div.suggestionCategoryValues
  length: 1
  __proto__: Object[0]
]

为什么这是我做错了什么？

编辑：

首先 - 我不想知道如何修复它 - 我已经有了一个解决方法（做一个内部foreach并总计大小为$（“。suggestionCategoryValues”）。height（）。

但我很好奇为什么他们不同。

我相信HTML是完全相同的，但我会发布标记，以防万一我是个白痴。这是“破损”页面的标记：

<div id="searchSuggestionSelection" style="display: block; position: absolute; top: 3.9em; left: 324px; height: 343px;">
    <div class="suggestionCategory">
        <div class="suggestionCategoryName"><span>company</span></div>
        <div class="suggestionCategoryValues">
             <div data-actual-search="XXXX" class="suggestionValue first">XXXX</div>
             <div data-actual-search="YYYY" class="suggestionValue">YYYY</div>
             <div data-actual-search="ZZZZ" class="suggestionValue">ZZZZ</div>
        </div>
     </div>
     <div class="suggestionCategory">
         <div class="suggestionCategoryName"><span>contact</span></div>
         <div class="suggestionCategoryValues">
             <div data-actual-search="AAAA" class="suggestionValue first">AAAA</div>
             <div data-actual-search="BBBB" class="suggestionValue">BBBB</div>
             <div data-actual-search="CCCC" class="suggestionValue">CCCC</div>
             <div data-actual-search="DDDD" class="suggestionValue">DDDD</div>
         </div>
     </div>
 </div>

这是“工作”页面的标记：

<div id="searchSuggestionSelection" style="display: block; position: absolute; top: 3.9em; left: 324px; height: 823px;">
    <div class="suggestionCategory">
        <div class="suggestionCategoryName" style="height: 316px;"><span>company</span></div>
        <div class="suggestionCategoryValues">
            <div data-actual-search="XXXX" class="suggestionValue first">XXXX</div>
            <div data-actual-search="YYYY" class="suggestionValue">YYYY</div>
            <div data-actual-search="ZZZZ" class="suggestionValue">ZZZZ</div>
        </div>
     </div>
     <div class="suggestionCategory">
         <div class="suggestionCategoryName" style="height: 512px;"><span>contact</span></div>
         <div class="suggestionCategoryValues">
             <div data-actual-search="AAAA" class="suggestionValue first">AAAA</div>
             <div data-actual-search="BBBB" class="suggestionValue">BBBB</div>
             <div data-actual-search="CCCC" class="suggestionValue">CCCC</div>
             <div data-actual-search="DDDD" class="suggestionValue">DDDD</div>
         </div>
     </div>
 </div>

正如您所见，“工作”页面成功应用了高度。

Answer 1

我认为这是因为“this”不是你想象的那样，尝试将它存储在一个变量（称为类别）中，如下所示：

$(".suggestionCategory").each(function() {
  var category = $(this);       
  var height = category.find(".suggestionCategoryValues").height();
  category.find(".suggestionCategoryName").outerHeight(height);
});

Answer 2

在做一些测试时，我不确定你为什么会这样做

.find(".suggestionCategoryName").outerHeight($(this).find(".suggestionCategoryValues").height());

当我进行测试时，outerHeight中的参数与将其设置为outerHeight(true);时的参数相同

$(".suggestionCategory").each(function() {
  var category = $(this);       
  category.find(".suggestionCategoryName").outerHeight(true);
 });

//其他方法

var suggestCat = $('.suggestionCategory'),i;
for(i=0;i<suggestCat.length;i++){
   var indexCat = suggestCat[i];
   $(indexCat).find('.suggestionCategoryName').outerHeight(true);
   }

此外，如果您尝试设置元素的高度，使用高度函数会不会更容易？

var suggestCat = $('.suggestionCategory'),i;
for(i=0;i<suggestCat.length;i++){
   var indexCat = suggestCat[i];
   $(indexCat).height(function(ele,index){
     return this.find('.suggestionCategoryName').height();
    });
   }

由于我非常不确定问题是什么或读错了，我可能会提供错误的答案。您还可以添加if语句来检查元素是否首先存在。

Answer 3

试试这个

$(".suggestionCategory").each(function() {
  var suggestionCategory = $(this);       
  suggestionCategory.find(".suggestionCategoryName").outerHeight(suggestionCategory.find(".suggestionCategoryValues").height());
});

Answer 4

哇 - 对于那么微不足道的事情来说，这是一项很大的努力。在“破碎的”页面上，我还包括了一个名为moorainbow的东西。与mooTools配合使用的颜色选择器。我所包含的版本大约有7年的历史，由于某种原因，它以一种难以察觉的方式干扰了jQuery。

可能将jQuery置于无冲突模式可能已经解决了它，这可能是最好的做法，但是会将相当多的$重新分解为jQuery。所以我只是从页面中移除了mooRainbow并且瞧 - 问题解决了，两个页面的行为再次相同。

jQuery find（）函数在不同的页面上返回不同类型的结果

4 个答案: