3

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

具有此标题栏的一页我的功能完美运行：

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

但在另一个我收到以下错误消息：

未捕获的类型错误：无法读取未定义的属性“高度”

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

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

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

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

评估为：

[
<div class=​"suggestionCategoryValues">​…​&lt;/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>

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

4

4 回答 4

1

我认为这是因为“this”与您预期的不同，请尝试将其存储在一个变量（称为类别）中，如下所示：

$(".suggestionCategory").each(function() {
  var category = $(this);       
  var height = category.find(".suggestionCategoryValues").height();
  category.find(".suggestionCategoryName").outerHeight(height);
});
于 2013-07-30T22:12:17.290 回答
0

在进行一些测试时，我不确定您为什么要这样做

.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);
   }

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

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 语句来首先检查元素是否存在。

于 2013-07-30T22:43:37.047 回答
0

试试这个

$(".suggestionCategory").each(function() {
  var suggestionCategory = $(this);       
  suggestionCategory.find(".suggestionCategoryName").outerHeight(suggestionCategory.find(".suggestionCategoryValues").height());
});
于 2013-07-31T08:03:30.463 回答
0

哇 - 对于如此微不足道的事情，这是一个很大的努力。在“损坏的”页面上，我还包括了一个叫做 moorainbow 的东西。与 mooTools 一起使用的颜色选择器。我包含的版本大约有 7 年的历史，由于某种原因，它以一种难以察觉的方式干扰了 jQuery。

可能将 jQuery 置于无冲突模式可能已经解决了它，无论如何这可能是最佳实践，但会涉及将 $'s 大量重构到 jQuery's 中。因此，我只是从页面中删除了 mooRainbow 并瞧 - 问题解决了，两个页面的行为再次相同。

于 2013-08-01T15:07:57.940 回答