زمان کنونی: ۱۱-۴-۱۳۹۵, ۰۶:۱۹ عصر درود مهمان گرامی! (ورودثبت نام)


[-]

اطلاعیه ها


سلام و عرض وقت بخیر خدمت دوستان و کاربران گرامی

جهت پرسش و پاسخ و دریافت پاسخ سریعتر لطفا از بخش پرسش و پاسخ وب سایت Softskill.ir استفاده نمایید.

برای ورود به بخش پرسش و پاسخ وب سایت جدید کلیک کنید.


انتخاب عنصرهای والد با Css و jQuery
زمان کنونی: ۱۱-۴-۱۳۹۵, ۰۶:۱۹ عصر
کاربرانِ درحال بازدید از این موضوع: 1 مهمان
نویسنده: academyit
آخرین ارسال: shopintex
پاسخ: 2
بازدید: 189

ارسال پاسخ 
 
امتیاز موضوع:
  • 1 رأی - میانگین امتیازات: 5
  • 1
  • 2
  • 3
  • 4
  • 5
 

انتخاب عنصرهای والد با Css و jQuery

۴-۲۴-۱۳۹۵, ۱۰:۲۲ عصر
ارسال: #1
انتخاب عنصرهای والد با Css و jQuery
همان‌طور که می‌دانید در css چیزی به نام parent selector وجود ندارد و در نتیجه انتخاب عنصر والد خیلی ساده به نظر نمی‌رسد. در این مقاله به بررسی چند مورد و راه حل‌های ممکن در این زمینه خواهیم پرداخت.


Parent Selector چیست؟
انتخاب عناصر صفحه به‌وسیله selectorهای css انجام می‌شود. parent selector امکان انتخاب عنصر سطح بالاتر (والد یک عنصر) را فراهم می‌کند. برای مثال در شبه کد زیر هدف انتخاب والد nav-link. است:

.nav-link::parent { }


نمونه 1: کنترل Legacy Content

تا قبل از Html5 برای جداسازی تصویر از عناصر دیگر صفحه، از P ، div و گاهی اوقات spanای که درون یک P قرار داده شده بود، استفاده می‌شد و راه استانداردی برای این کار وجود نداشت. اما امروزه برای نظم دادن هر چه بیشتر ساختار کد، از figure و figcaption استفاده می‌شود.
[تصویر:  1466753400parent-selector-image-caption1.jpg]
هدف نمایش عکس به صورت بالا می‌باشد اما از آنجایی که ممکن است divهای دیگری در کد وجود داشته باشند که شامل عکس نباشند، کد زیر کاملا غیرعملی خواهد بود.

.page-content div {
padding: 15px;
background-color: #f3f3f3;
margin: 10px 0 20px;
}
.page-content div img {
marging: 0 0 10px;
}
.page-content div .img-caption {
color: #999;
font-size: 12px;
text-align: center;
Wisplay: block;
}


با

استفاده از کد بالا، Background color، Padding و Margin به تمام divهای موجود اعمال خواهند شد؛ در حالی‌که هدف ما فقط و فقط کنترل divهایی است که داری image و image caption هستند.

نمونه 2: حفظ نسبت‌های ویدیوئی

یکی دیگر از نکات قابل بررسی حفظ نسبت‌ ویدیوی اضافه شده از سایت‌های دیگر (مانند YouTube) برای نمایش مناسب ویدیو است.
[تصویر:  1466753832parent-selector-video-wrapper.jpg]
ممکن است div والد ویدئو مشخص نباشد و یا ویدیوها در div یا pهای فاقد کلاسی خاص قرار داشته باشند؛ در این صورت انتخاب عنصر مناسب برای اعمال styleها نیازمند مهارت خواهد بود. مانند نمونه قبلی، اعمال کد زیر به علت انتخاب تمام divها بدون درنظر گرفتن وجود یا عدم وجود ویدیو در آن‌ها، غیرمنطقی است.
.page-content {
width: 560px;
margin-right: auto;
margin-left: auto;
margin-top: 30px;
}
.page-content div {
position: relative;
padding-bottom: 56.25%;
}
.page-content div iframe {
position: absolute;
top: 0;
width: 100%;
height: 100%;
}


امکان انتخاب والدهایی که دارای ویدیو هستند، حل مشکل بالا را بسیار ساده‌ خواهد کرد!!!

نمونه 3: واکنش به المان‌های فرم

معمولا با focus روی المانی از فرم باید borderهای آن پر رنگ‌تر و موقعیت کاربر مشخص شود. گاهی اوقات ممکن است علاوه بر پررنگ شدن borderهای المان، بخواهید عنوان آن نیز پررنگ شود تا اهمیت بیشتری را تلقین کنید.

[تصویر:  1466754069parent-selector-form.jpg]

راه حل‌های ممکن
استفاده از ()has: در Css
این selector توان انتخاب عنصرها با توجه به فرزند نوشته شده در پرانتز را دارد. در نمونه اول مطرح شده در بالا، کد زیر background color را تنها به divهایی اعمال خواهد کرد که دارای image caption هستند.
.page-content div:has( .img-caption ) {
padding: 15px;
background-color: #ccc;
}
و یا حتی برای دقت بیشتر و انتخاب فرزندان سطح اول کد زیر منطقی خواهد بود:

.page-content div:has( > .img-caption ) {
padding: 15px;
background-color: #ccc;
}


استفاده از parent selector های جی‌کوئری
انتخاب والد در جی‌کوئری به سه روش زیر ممکن است:

1- Parent():
این تابع والد بدون واسط (اولین والد) یک عنصر را انتخاب خواهد کرد. از این تابع برای حل مشکل در هر سه نمونه مطرح شده، می‌توان استفاده کرد.
[تصویر:  1466754709parent-selector-image-caption-html.jpg]
برای مثال با استفاده از این تابع می‌توان کلاسی خاص را به عنصر والد تصویر اعمال کرد:
$( ".img-caption" )
.parent()
.addClass( "has-img-caption" );
کد بالا عنصر پوشاننده بی‌واسطه تصویر را بدون توجه به نوع عنصر، انتخاب و کلاس has-img-caption را به آن اعمال خواهد کرد. این کار کنترل بیشتری را روی المان برای ما امکان‌پذیر می‌کند.
[تصویر:  1466754805parent-selector-image-caption-html-class.jpg]

2- Parents():
این تابع حالت جمع تابع قبلی است و تمام والدها را تا ریشه انتخاب و کلاس مورد نظر را به آن‌ها اعمال می‌کند.

$( ".img-caption" )
.parents()
.addClass( "has-img-caption" );
اما با توجه به هدف ما که انتخاب والد بی واسطه است، این کار بیهوده به نظر می‌رسد.
[تصویر:  1466754894parent-selector-image-caption-...arents.jpg]
برای دخالت دادن نوع والد در انتخاب، می‌توان نوع را به عنوان آرگومان به تابع داد.

$( ".img-caption" )
.parents( "div" )
.addClass( "has-img-caption" );
در این حالت تابع از image به سمت ریشه حرکت و تمام divهای موجود را برای اعمال کلاس انتخاب خواهد کرد. در صورتی‌که هنوز راضی نشده‌اید:
می‌توانید دامنه انتخاب را محدودتر و با استفاده از ایندکس، تنها اولین div را انتخاب کنید.
?
1
2
var $parents = $( ".caption" ).parents( "div" );
$parents[0].addClass( "has-img-caption" ); // select the first div add add the class.

3- parentsUntil():
تابع بالا تمام عنصرهای والد به جز عنصر مشخص شده در پرانتز را انتخاب می‌کند تا کلاس به آن‌ها اعمال شود.

$( ".caption" )
.parentsUntil( ".page-content" )
.addClass( "has-img-caption" );
[تصویر:  1466755182parent-selector-image-caption-...suntil.jpg]

زمانی‌که تعداد عناصر تودرتو زیاد است، تابع ()parentUntil مناسب‌تر خواهد بود.
امضای academyit آکادمی آی تی: مرجع آموزش های تخصصی ویدئویی و کاملا منطبق با نیاز های روز دنیای آی تی

آکادمی آی تی : academy-it.ir

به سایت ما سر بزنید : دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ
۱۰-۶-۱۳۹۵, ۰۲:۴۱ صبح
ارسال: #2
RE: انتخاب عنصرهای والد با Css و jQuery
ممنون از شما بابت مطلبتون
امضای shopintex دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
| دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
| دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ
ارسال پاسخ 


موضوع‌های مرتبط با این موضوع...
موضوع: نویسنده پاسخ: بازدید: آخرین ارسال
  فیلم آموزش jQuery-کتاب آموزش jQuery-مقالات آموزش jQuery-دوره آموزش jQuery –رایگان amirhosein71 0 433 ۹-۱۵-۱۳۹۴ ۰۵:۱۷ عصر
آخرین ارسال: amirhosein71
Question استفاده از .each و انتخاب یکی در میان div ها rezashady 0 528 ۹-۷-۱۳۹۴ ۰۱:۵۷ عصر
آخرین ارسال: rezashady
  متحرک سازی در طراحی سایت با jquery elham1388 0 775 ۵-۳-۱۳۹۴ ۰۱:۴۸ عصر
آخرین ارسال: elham1388
  انتخاب گر ها در جی کوئری (Jquery Selectors) heidari 0 987 ۴-۷-۱۳۹۴ ۰۹:۵۶ صبح
آخرین ارسال: heidari
  ارتباط jquery و javascript shahab ra 2 1,849 ۴-۳۰-۱۳۹۳ ۰۴:۰۸ عصر
آخرین ارسال: shahab ra
  توضیح کوتاه و کاربردی با مثال درباره ی jQuery JohnnyB 0 1,347 ۳-۲۰-۱۳۹۳ ۱۰:۳۳ صبح
آخرین ارسال: JohnnyB

پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان