Цепные функции в 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, деленную на количество элементов div в # colRight.

Однако это не работает.

Я никогда не понимал, как связывать функции, и никогда не находил никого, кто мог бы научить меня.

Так что я хотел бы попросить вас о двух услугах.

1. Почему мой код jQuery отсутствует.
2. Кто-нибудь знает учебник, который объясняет его более подробно, чем в учебниках на веб-сайте jQuery?

Спасибо за ваше время.

С уважением,
Marius

Answer 1

Что касается цепочки, я бы рискнул вам вот что: не думайте, что вы всегда можете вслепую цепляться. Большинство основных компонентов jQuery и jQuery UI будут работать без проблем, но некоторые сторонние модули не будут возвращать объекты jQuery (что и возвращают библиотеки jQuery).

Основы таковы:

$ (некоторый селектор) - это вызов функции, который имеет возвращаемое значение 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();

тогда мы бы дважды приковали цепочку, и наш результат был бы 80;

Но иногда вы увидите их там, где они также принимают опции, которые я не собираюсь обсуждать. Вы хотели узнать основы работы цепочки, поэтому я расскажу о более продвинутых вещах, которые вы сможете найти позже. Например, чтение не минимального источника.

Теперь, мое раннее предупреждение состояло в том, что иногда библиотеки для jQuery будут возвращать объект себе, и объект внутри библиотеки не обязательно будет jQueryObject [] (чтобы снова использовать мою собственную номенклатуру). Так что это выходит за рамки цепочки. Все библиотеки сообщат вам, что возвращает объект, будь то int, строка, объект, jQuery или что-то еще.

Так, например, на странице jQuery .height () , в синей полосе вниз по странице, которую вы видите: .height () Возвращает: целое число, но далее вниз по странице: .height (значение) Возвращает: jQuery и на странице .each () в синей полосе мы видим: .each (function (index, Element)) Возвращает: jQuery

Таким образом, вы можете видеть, как разработчики документации API сообщают вам, что возвращается от каждой функции. Вот как вы можете знать, что будет следующим объектом при сцеплении. Вот почему иногда вы не можете связать определенные вещи вместе.

Хорошо, это много информации за один удар, но вы хотели быстро и грязно, и если это не поможет вам набрать скорость, я не знаю, что получится.

tl; dr: извините за стену текста, но это непрерывный кусок ответа. Я хочу знать, вернись и прочитай это.

Answer 2

Я займусь вопросом № 1, , почему , так много учебников, что я не уверен, что лучше. Ваш общий вид цепочки не за горами, просто нужно немного изменить эту строку:

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

Вам нужно добавить возврат и вызывать .length не как функцию, например:

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

Функция должна return что-то (в данном случае!), А .length - это свойство (массива объектов внутри объекта jquery). Однако в этом случае, см. Ответ Cletus, это гораздо лучшее общее решение для установки высоты, как вы хотите.

Answer 3

Я не уверен, посмотрев на ваш код, почему он не работает, но это гораздо более простой способ добиться того же:

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

Answer 4

Значит, два 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() ) 
                           ); 
});

Answer 5

Функция, которую вы передаете height(), должна возвращать значение. Попробуйте это на своем внутреннем коде:

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

Что касается цепочки, то в вашем коде это не очень важно. По сути, большинство функций jQuery возвращают объект, с которым вы только что действовали. Например, если вы установите высоту объекта, этот объект будет возвращен. Вместо этого:

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

Вы можете сделать это:

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