با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش jQuery ، را دنبال می کنند. اگر در جریان روال دوره باشید. به تازگی وارد فصل تکنیک Traversing ، شده ایم. و تاکنون آشنایی با مفاهیم این تکنیک و عناصر والد را بررسی کرده ایم. اکنون در ادامه ی فصل، به مبحث عناصر فرزند تکنیک Traversing در jQuery یا عناصر descendant ، می پردازیم.
تا این بخش از آموزش این فصل ، برای آشنایی شما با تعاریف و مفاهیم تکنیک Traversing ، بخش کاربردی مقدمه ای بر تکنیک Traversing در jQuery و برای آشنایی با عناصر والد (ancestor) ، بخش عناصر والد در تکنیک Traversing در jQuery ، را ارئه کردیم.
در ادامه ی بخش، به موضوع عناصر فرزند یا descendant تکنیک Traversing در jQuery ، می پردازیم.
یک عنصر descendant ، در واقع عناصر فرزند،نوه و …را تا پایین ترین سطح درخت DOM، را شامل می شود.
در jQuery ، می توانید به تمام عناصر فرزند یک عنصر در درخت DOM ، دسترسی پیدا کنید.
برای پیمایش پایین درخت DOM ، و برگرداندن عناصر فرزند ، دو تابع ارائه شده است:
تابع ()children ، تمام فرزندان مستقیم عنصر انتخاب شده را ، برمی گرداند.
این روش فقط یک سطح از درخت DOM ، را پیشمایش می کند.
مثال زیر ، چگونگی برگرداندن تمام عناصر فرزند عنصر <div>
، را نشان می دهد:
1 2 3 | $(document).ready(function(){ $("div").children(); }); |
شما همچنین می توانید، از پارامترهای گزینشی ، برای فیلتر کردن عناصر فرزند، عنصر انتخاب شده ، استفاده کنید.
در مثال زیر ، تمام عناصر فرزند مستقیم عنصر <div>
، که عنصر <p>
، با نام کلاس “first” ، هستند را، بر می گرداند:
1 2 3 | $(document).ready(function(){ $("div").children("p.first"); }); |
از تابع ()find ، برای برگرداندن تمام عناصر فرزند ، عنصر انتخاب شده استفاده می شود.
این تابع تا پایین سطح درخت DOM، را پیمایش می کند.
مثال زیر تمام عناصر <span>
، که فرزندان عنصر <div>
، هستند را برمی گرداند.
1 2 3 | $(document).ready(function(){ $("div").find("span"); }); |
مثال ۲: برگرداندن تمام عناصر فرزند ، عنصر <div>
:
1 2 3 | $(document).ready(function(){ $("div").find("*"); }); |
تاکنون علاوه بر مفاهیم تکنیک Traversing ، چگونگی دسترسی به عناصر والد و در این بخش فرزند را در پیمایش درخت DOM را ، درقالب موضوع عناصر فرزند یا descendant تکنیک Traversing در jQuery ، به همراه توابع و مثال های آن ، ارائه کرده ایم. امیدواریم که این مطالب نیز، مورد استفاده و توجه شما ، قرار گرفته باشد.