Monday, July 16, 2012

JQuery : การใส่ค่า Index ของ Object นั้นๆ

JQuery : การใส่ค่า Index ของ Object นั้นๆ ด้วย :eq


   ใน JQuery นั้นเวลาเราเลือก Elements เป็นแบบ Class หรือ Name[] (ที่เป็น Array) เราจะได้ค่ามาเป็น Array เพราะฉะนั้นถ้าเราต้องการกำระบุว่าเป็น Array ตัวไหนให้ทำดังนี้นะครับ


เช่น ถ้าเรามี Elements ดังนี้

//เรามี DIV ทั้งหมด 6 อัน ตามด้านล่างนี้ นะครับ
<div class="divBox">A1</div>
<div class="divBox">A2</div>
<div class="divBox">A3</div>
<div class="divBox">A4</div>
<div class="divBox">A5</div>
<div class="divBox">A6</div>

//เรากำหนดให้ .divBox เป็นดังนี้
/*
 background-color เป็น รหัสสี #0099FF
 ความสูง เป็น 25px
 ความกว้าง เป็น 100px
*/
$('.divBox').css({
 'background-color':'#0099FF'
 ,'height':'25px'
 ,'width':'100px'
});

แล้วคราวนี้ถ้าเราต้องการให้ A2,A3,A4,A5,A6 ความกว้างเป็น 90px,80px,70px,60px,50px ตามลำดับเราจะทำยังไง สำหรับคนที่ยังไม่รู้ ก็ลองดูตามนี้เลยครับผม
$('.divBox:eq(1)').css({'width':'90px'}); //DIV อันนี้จะเป็นของ A2
$('.divBox:eq(2)').css({'width':'80px'}); //DIV อันนี้จะเป็นของ A3
$('.divBox:eq(3)').css({'width':'70px'}); //DIV อันนี้จะเป็นของ A4
$('.divBox:eq(4)').css({'width':'60px'}); //DIV อันนี้จะเป็นของ A5
$('.divBox:eq(5)').css({'width':'50px'}); //DIV อันนี้จะเป็นของ A6


ลองเอาไปประยุกต์กับทางอื่นดูนะครับ
มีข้อสงสัยโพสถามได้เลยนะครับ


BY N1B




No comments: