وظائف التسلسل في 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 مقسومًا على عدد divs في #Colright.

ومع ذلك ، فإنه لا يعمل.

لم أفهم أبدًا كيفية سلسلة الوظائف ، ولم أجد أي شخص يعلمني.

لذلك أود أن أسأل اثنين من لك.

1. لماذا لا رمز jQuery أعلاه.
2. هل يعرف أي شخص برنامج تعليمي يشرحه أكثر تفصيلاً منه في البرامج التعليمية على موقع jQuery؟

شكرا لوقتك.

أطيب التحيات،
ماريوس

Answer 1

بالنسبة للسلاسل ، أود أن أخاطر بك هذا: لا تفترض أنه يمكنك دائمًا سلسلة أعمى. لن تقوم معظم الأشياء الأساسية و jQuery UI بسلسلة دون أي مشكلة ، لكن بعض وحدات الطرف الثالث لن تعيد كائنات jQuery (وهو ما يعود JQuery Libs).

الأساسيات مثل هذا:

$ (بعض المحددات) هي استدعاء دالة لها قيمة إرجاع لـ 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 [] (لاستخدام التسميات الخاصة بي مرة أخرى). لذلك هذا خارج نطاق التسلسل. ستخبرك جميع المكتبات بما يعيده كائن ، سواء كان ذلك أو سلسلة أو كائن أو jQuery أو أي شيء آخر.

على سبيل المثال ، في jQuery .ارتفاع() الصفحة ، في الشريط الأزرق أسفل الصفحة التي تراها:. height () إرجاع: عدد صحيح ولكن أبعد من الصفحة: .hight (القيمة) إرجاع: jQuery وعلى .كل() الصفحة ، في الشريط الأزرق نرى:.

لذلك يمكنك أن ترى كيف يخبرك كتاب وثائق API بما يتم إرجاعه من كل وظيفة. هكذا يمكنك معرفة ما سيأخذه الكائن التالي عند التسلسل. لهذا السبب لا يمكنك في بعض الأحيان سلسلة بعض الأشياء معًا.

حسنًا ، هذه الكثير من المعلومات في ضربة واحدة ، لكنك أردت سريعًا وقذرًا ، وإذا لم يسبق لك ذلك إلى السرعة ، فأنا لا أعرف ماذا ستفعل.

TL ؛ DR: آسف على جدار النص ، لكنه جزء متجاور من الإجابة. يا تريد أن أعرف ، ارجع وقراءتها.

Answer 2

سأتعامل مع السؤال رقم 1 ، لماذا, ، الكثير من البرامج التعليمية هناك لست متأكدًا من الأفضل. إن وجهة نظرك العامة للسلاسل ليست بعيدة ، فقط تحتاج إلى القليل من التعديل على هذا الخط:

$('#colLeft').height() / $('#colRight > div').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

الوظيفة التي تمر بها 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() ) 
                           ); 
});