jquery - jQuery での関数の連鎖。説明がどこにも見つからない

Question

これを行う方法がわかりません。

私のマークアップ:

<table>
    <tr>
        <td id="colLeft">
            Lorem ipsum dolor<br/>
            Lorem ipsum dolor<br/>
            Lorem ipsum dolor<br/>
            Lorem ipsum dolor<br/>
            Lorem ipsum dolor<br/>
            Lorem ipsum dolor.
        </td>
        <td id="colRight">
            <div>1</div>
            <div>2</div>
        </td>
    </tr>
</table>

$(document).ready(function() {
    $('#colRight > div').each(function() { // I try to: select all divs in #colRight
        $(this).height(function(){ // I try to: sets the height of each div to:
            $('#colLeft').height() / $('#colRight > div').length(); // the height of #colLeft divided by the number of divs in colRight.  
        });
    });     
});

私がやろうとしているのは、各 div の高さを #colLeft の高さを #colRight の div の数で割った値に変更することです。

ただし、機能しません。

関数を連鎖させる方法を理解したことがなく、教えてくれる人を見つけたこともありません。

そこで、2点お願いがあります。

上記のjQueryコードを使用しないのはなぜですか。
jQuery Web サイトのチュートリアルよりも詳細に説明しているチュートリアルを知っている人はいますか?

お時間をいただきありがとうございます。

敬具、
マリウス

score 1 · Accepted Answer

コードが機能しない理由を一瞥しただけではわかりませんが、これは同じことを実現するためのはるかに簡単な方法です。

$(function() {
  var divs = $("#colRight > div");
  var height = $("#colLeft").height() / divs.length;
  divs.height(height);
});

jQueryの関数を連鎖させることには魔法のようなものは何もありません。ちなみに、人々が「連鎖」と言うとき、彼らは次のような呼び出しを意味します：

$("div").css("background", "yellow").addClass("foo");

それを理解するために知っておく必要がある唯一のことは、ほとんどのjQueryメソッドがjQueryオブジェクトを返すため、次のようになります。

var div = $("div");
div.css("background", "yellow");
div.addClass("foo");

score 1 · Accepted Answer

質問1、その理由に取り組みます。非常に多くのチュートリアルがあるので、何が最善かわかりません。チェーンの全体像はそれほど遠くありません。この行を少し調整する必要があります。

$('#colLeft').height() / $('#colRight > div').length();

次のように、returnを追加し、関数としてではなく.lengthを呼び出す必要があります。

return $('#colLeft').height() / $('#colRight > div').length;

関数はreturn何か（この場合.lengthは！）を必要とし、（jqueryオブジェクト内のオブジェクト配列の）プロパティです。ただし、この場合は、cletusの回答を参照してください。必要に応じて高さを設定する方が、全体的な解決策としてはるかに優れています。

score 1 · Accepted Answer

連鎖に関しては、私はあなたにこれを危険にさらします：常に盲目的に連鎖できると思い込まないでください。ほとんどのコア jQuery と jQuery UI は問題なく連鎖しますが、一部のサードパーティモジュールは jQuery オブジェクトを返さない (jQuery ライブラリが返すもの)。

基本は次のようなものです。

$( some selector ) は、次のような jQueryObject[] の戻り値を持つ関数呼び出しです。

/* in "pretend land" because this isn't accurate */
public jQueryObject[] $( some selector ) {
  /* do some magic here with some selector */
  return jQueryObject[];
}

jQueryObject[] を返すので、それを別の場所に置き換えることができます。しかし、チェーンの魔法は、「入力として使用する左側のピリオドによって接続されているものは何でも」と言います。したがって、次の場合：

int a = 20;

そして次のような関数：

public int Doubler(int someInt) {
  return ( someInt * 2 );
}

次に、次のように連鎖できます。

a.Doubler();

すると 40 になります。

a.Doubler().Doubler();

その後、2 回連鎖し、結果は 80 になります。

しかし、オプションを受け入れる場合もありますが、これについては説明しません。連鎖がどのように機能するかについての基本が必要だったので、後で調べることができるより高度なものを想定します。非分ソースの読み取りなど。

さて、私の以前の注意点は、jQuery のライブラリがそれ自体にオブジェクトを返すことがあり、ライブラリ内のオブジェクトが jQueryObject[] であることが保証されていないことでした (再び独自の命名法を使用するため)。したがって、それは連鎖の範囲外です。すべてのライブラリは、int、string、object、jQuery など、オブジェクトが返すものを教えてくれます。

たとえば、jQuery .height()ページでは、ページの下の青いバーに次のように表示されます: .height() 戻り値: 整数ですが、ページのさらに下: .height( value ) )ページ、青いバーに表示されます: .each( function(index, Element) ) 戻り値: jQuery

したがって、API ドキュメントの作成者が各関数から返される内容をどのように説明しているかがわかります。これにより、連鎖時に次のオブジェクトが何を受け取るかを知ることができます。そのため、特定のものを連鎖させることができない場合があります。

わかりました、それは一撃でたくさんの情報ですが、あなたは素早く汚いものが欲しかったのです。

tl;dr: テキストの壁で申し訳ありませんが、連続した回答です。知りたい、戻って読んでください。

score 0 · Accepted Answer

渡す関数height()は値を返す必要があります。内部コードでこれを試してください：

    $(this).height(function(){ 
        return $('#colLeft').height() / $('#colRight > div').length(); 
    });

連鎖に関しては、上記のコードでは実際には機能しません。基本的に、ほとんどのjQuery関数は、操作したばかりのオブジェクトを返します。したがって、たとえば、オブジェクトに高さを設定すると、そのオブジェクトが返されます。これの代わりに：

$('#someid').height(300);
$('#someid').click(functionName);

あなたはこれを行うことができます：

$('#someid').height(300).click(functionName);

score 0 · Accepted Answer

では、2つのdivはそれぞれ、左側のリストと同じ高さである必要がありますか？言い換えると：

-      --
-      --
-      --
-      --
       +
       +
       +
       +

それは正しく見えないからです。確かに、ポイントを説明するために単純なボックスシェイプを使用していますが、確認したいと思います。あなたがむしろ持っているように思われる：

-      --
-      --
-      +
-      +

だから、私はおそらく目指します（しかし、私はまだブラウザでこれを試していません：

$(document).ready(function() {
  /* it should already apply the height to "each" so you don't have to do that */
  $('#colRight > div').height( 
     /* I give the line it's own parens so I can make sure the grouping is correct */
     ( $('#colLeft').height() / $('#colRight > div').length() ) 
                           ); 
});

jquery - jQuery での関数の連鎖。説明がどこにも見つからない

5 に答える 5

Related

Reference