Chaining functions in jQuery. I cannot find an explanation anywhere

Question

I have no idea how to do this.

My markup:

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

What I am trying to do is to change the height of each div to the height of #colLeft divided by the number of divs in #colRight.

However, it doesnt work.

I've never understood how to chain functions, and never found anyone to teach me.

So I would like to ask two favours of you.

1. Why doesnt my above jQuery code.
2. Does anyone know of a tutorial that explains it more detailed than in the tutorials on the jQuery website?

Thank you for your time.

Kind regards,
Marius

Answer 1

아니오, 그는 매우 어려운 유지 보수가 있으며 불안정합니다.HTML 5 및 CSS의 사용을 권장합니다.

Answer 2

I'll tackle Question #1, the why, so many tutorials out there I'm not sure what's best. Your overall view of chaining isn't far off, just needs a little adjustment on this line:

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

You need to add a return, and call .length not as a function, like this:

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

A function needs to return something (in this case!), and .length is a property (of the object array inside the jquery object). However, in this case, see cletus's answer, it's a much better overall solution to set the height like you want.

Answer 3

SharePoint 2013은 Windows Server 2012 R2에서 지원되지 않습니다.이것은 이번 봄에 SHAREPOINT 2013의 SP1 출시로 변경 될 수 있습니다.

기타 : http://support.microsoft.com/kb/2891274

Answer 4

The function that you pass to height() must return a value. Try this on your inner code:

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

As for chaining, it doesn't really come into play in your code above. Basically, most jQuery functions return the object you just acted on. So for example if you set the height on an object, that object is returned. In stead of this:

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

You can do this:

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

Answer 5

So the two div's should each be the same height as the left list? In other words:

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

because that doesn't look right. Granted, I'm using simplistic box shapes to illustrate a point, but I wanna make sure. Seems like you would rather have:

-      --
-      --
-      +
-      +

And so, I would probably aim for (but I haven't tried this in a browser just yet:

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