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

StackOverflow https://stackoverflow.com/questions/2541924

  •  23-09-2019
  •  | 
  •  

質問

やり方が分かりません。

私のマークアップ:

<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 の数で割った値に変更することです。

しかし、うまくいきません。

私は関数を連鎖する方法をまったく理解していませんし、教えてくれる人も見つかりませんでした。

そこで、２つお願いしたいことがあります。

  1. 上記の jQuery コードがそうでないのはなぜですか。
  2. jQuery Web サイトのチュートリアルよりも詳しく説明しているチュートリアルを知っている人はいますか?

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

敬具、
マリウス

役に立ちましたか？

解決

チェーンに関しては、私はあなたにこれをハザードなります。Doあなたが常に盲目的にチェーンできることを前提としません。コアjQueryと問題なくjQueryのUIスタッフ意志チェーンが、いくつかのサードパーティのモジュールのほとんどは（何jQueryのLIBSのリターンである）のjQueryのオブジェクトを返しません。

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

$（いくつかのセレクタ）にjQueryObject []などの戻り値が関数呼び出しであります 

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

あなたは[] jQueryObjectを返している、あなたがどこかにそれを置き換えることができますので。しかし、チェーンの魔法は、「私は、入力としての私の左Iの使用上の期間でに添付しています何でも」と言います。だから、私たちが持っていた場合：

int a = 20;

などのような関数ます：

public int Doubler(int someInt) {
  return ( someInt * 2 );
}
これのような

我々は可能性チェーンます：

a.Doubler();

と我々があった場合に40を得る。しかします：

a.Doubler().Doubler();

そして、私たちは二度チェーンただろうと私たちの結果は80になります。

しかし、彼らはまた、私は入るつもりはないオプションを、受け入れる場所時にはあなたがそれらを見ることができます。あなたは作品を連鎖方法についての基本を望んでいたので、私はあなたが後でルックアップすることができ、より高度なものを仮定します。非分間源を読み取るなど。

さて、私の以前の警告は、jQueryのために時々ライブラリは自分自身にオブジェクトを返すと、ライブラリ内のオブジェクトがjQueryObjectは[]（再度、私自身の命名法を使用する）であることが保証されていないということでした。チェーンの範囲外のことですので。すべてのライブラリーが、それはint型、文字列、オブジェクト、jQueryのまたは任意のかどうか、どのようなオブジェクトを返すことを教えてくれます。

青いバーの下にあるので、例えば、jQueryの .height（）のページで、

、ご覧のページ：.height（）戻り値：整数が、さらなるページダウン：.height（値）戻り値：jQueryの そして、 .each（）のページで、私たちが見る青いバーで：.each（関数（インデックス、エレメント））戻り値：jQueryの

ですから、APIドキュメントの作成者は、各関数から返されているものを教えてどのように見ることができます。それはあなたが次のオブジェクトが連鎖する時に取るかを知ることができる方法です。のはなぜ時々、あなたは一緒に特定の物事をチェーンすることができない。

[OK]を、それは一撃で多くの情報がありますが、あなたが迅速かつ汚いを望んでいたし、その場合の速度にあなたをもたらすことはありません。私にはわからない何をされます。

TL; DR：テキストの壁のために申し訳ありませんが、それは答えの連続した塊です。 Yaは戻って、それを読んで、知りたい。

他のヒント

私は質問＃1、私は必ず最善のものではないよそこのなぜの、非常に多くのチュートリアルに取り組むます。チェーンのあなたの全体図は、遠くではありませんちょうどこのラインに少しの調整を必要とします。

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

あなたはリターンを追加する必要があり、このように、関数として.LENGTHない呼び出します：

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

関数は、（この場合は！）return何かする必要がある、と.lengthは（jQueryオブジェクト内のオブジェクト配列の）プロパティです。しかし、この場合には、cletusの答えは、それはあなたが望むように高さを設定するために、はるかに優れた総合的なソリューションです参照してください。

それが機能しない理由

私はあなたのコードを一瞥からわからないが、これは同じことを達成するためのはるかに簡単な方法です。

$(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");

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

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

チェーン接続用として、それは実際に上記のコード内で遊びに来ていません。基本的に、ほとんどのjQueryの関数は、あなただけに作用するオブジェクトを返します。だから、例えば、あなたはそのオブジェクトが返され、オブジェクトの高さを設定している場合。これの代わりに：

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

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

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

だから、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() ) 
                           ); 
});
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top