نصائح المرجعية عناصر DOM يعمل مع مسج

Question

بحاجة الى بعض النصائح حول كيفية الرجوع إلى العناصر مع مسج (DOM/عبور/محددات).أحيانا يكفي أن تعيين معرف في العنصر المطلوب وهل هذا:

$('#elementID').hide();

ولكن في بعض الأحيان أنها مجرد لا يمكن استخدامها ، على سبيل المثال عند العمل مع قائمة من العناصر ن, لقد رأيت بعض الناس إرفاق فئة إلى كل عنصر من عناصر القائمة مثل:

<a class="selectMe" href="http://jquery.com/">jQuery1</a>
<a class="selectMe" href="http://jquery.com/">jQuery2</a>
<a class="selectMe" href="http://jquery.com/">jQuery2</a>

ثم تفعل هذا مع مسج:

$('.selectMe').hide();

بعض الأخرى تفعل الشيء نفسه ولكن مع السمة rel وهلم جرا..

بعض الناس هذا عام بحيث مخيف إذا كان هذا هو السيناريو:

<div id="MyID">
<span>Some Text Here</span><a href="http://jquery.com/">jQuery1</a>
</div>

إذا كنت ترغب في إرفاق الحدث إلى مرساة:

$('#MyID a').show();

مثل افتراض أنه سيكون هناك فقط 1 رابط داخل DIV.

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

Answer 1

البحث عن أسرع بنيات.ID هو الأسرع.الحصول على أصغر السياق سريع يمكنك حتى استخدام هوية شعبة ، ثم اختر من هناك - تجنب كاملة دوم البحث عندما يكون ذلك ممكنا.

فعلى سبيل المثال, سوف يكون أسرع إلى البحث عن عنصر مع فئة من مجرد فئة.

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

على سبيل المثال:

<div id='mydiv'>
<a class="selectMe" href="http://jquery.com/">jQuery1</a>
<a class="selectMe" href="http://jquery.com/">jQuery2</a>
<a class="selectMe" href="http://jquery.com/">jQuery2</a>
</div>

ثم القيام بتحديد:(تحريرها في الملاحظات)

$('#mydiv').children('a.selectMe').hide();

هذا ثم يبحث فقط في هذا السياق على الروابط.

تحرير في ملاحظات:

هناك بعض التفضيلات اختيار الجملة مثل:

 $('#mydiv').children('a.selectMe').hide();
 $('#mydiv > a.selectMe').hide();

بعض الأبحاث اللازمة وثائق مسج هو غامض قليلا هنا:" الأم > يعود الطفل:مجموعة مباريات كل طفل العناصر المحددة من قبل "الطفل" من العناصر المحددة من قبل "الأم"." و " الأطفال( expr ) إرجاع:مسج الحصول على مجموعة من العناصر التي تحتوي على كل من فريدة من نوعها للأطفال فوري لكل من يقابل مجموعة من العناصر."

السؤال الذي يحتاج إلى توضيح في ذهني هو ما إذا كان النموذج الأول يعود جميع الأطفال/الأحفاد أو مجرد الفوري الأطفال النموذج الثاني يشير إلى صحيح.واحد من هذه هو "محدد" شكل والآخر تحت عنوان "العبور" الذي تشبه المهام الوظيفية ولكن ليس بالضبط نفس الشيء.

Answer 2

أود أن أقول أنه يعتمد على الوضع ولكن مثل مارك Schultheiss قال: فإنه يساعد على فهم كيف مسج ينفذ المختارون على الحصول على العناصر.

اختيار حسب className دون إعطاء أي سياق ستكون بطيئة في أي لأنه لا يدعم getElementsByClassName.راجع هذه المقالة http://ejohn.org/blog/getelementsbyclassname-speed-comparison/.فإنه يساعد على prepend مع اسم العنصر (مثل div.className) أو الحد من البحث على نطاق أصغر مثل هذا - $('.class', '#myDiv')

الشيء نفسه ينطبق مع السمة محددات. rel السمة الاعتداء هو أسوأ من class السمة تعاطي منذ ليس هناك مواطن البحث-من قبل-سمات وظيفة في أي متصفح.