3

サイトに検索機能付きのヘッダー バーがあります。私が実装した機能の 1 つは、結果を見つけて、それらを含むボックスのサイズを変更することです。

このヘッダーバーを持つ1つのページで、私の機能は完全に機能します:

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

しかし、別の場合、次のエラーメッセージが表示されます。

キャッチされていない TypeError: 未定義のプロパティ '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

「これ」はあなたが予想していたものとは異なるためだと思います。次のように変数（カテゴリと呼ばれます）に格納してみてください。

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

これを試して

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