Объединение функций в 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?

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

С уважением,
Мариус

Answer 1

Что касается цепочки, я бы рискнул сделать следующее:Не думайте, что вы всегда можете слепо связать цепочку.Большая часть основного jQuery и элементов пользовательского интерфейса jQuery будут соединяться без проблем, но некоторые сторонние модули не будут возвращать объекты 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(значение) Возвращает:jQuery и на .каждый() странице, в синей полоске мы видим:.each( функция(индекс, Элемент) ) Возвращает:jQuery

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

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

вкратце; доктор:извините за стену текста, но это непрерывный кусок ответа.Хочешь знать, вернись и прочитай.

Answer 2

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

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

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

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

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

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

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

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

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

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

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

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

Answer 5

То есть каждый из двух 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() ) 
                           ); 
});