طريقة الحصول على قيمة index للعنصر باستخدام jQuery

هذا المثال يشرح كيفية استخدام jQuery للحصول على قيمة الفهرس "index" للعنصر. يُشارك مع الجميع لتكون مرجعًا، ويتمثل فيما يلي:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery获取索引值</title>
<style type="text/css">
  *{margin:0; padding:0;}
  ul,li{list-style:none;}
  #wrap{width:980px; height:500px; overflow:hidden; margin:0 auto;}
  ul{width:200px; height:500px; float:left;}
  ul li{width:200px; height:100px; line-height:100px; text-align:center; font-size:16px; cursor:pointer;}
  #wrap div{width:700px; height:500px; float:right;}
  #btn0,.box0{background:#933;}
  #btn1,.box1{background:#09F;}
  #btn2,.box2{background:#93F;}
  #btn3,.box3{background:#F66;}
  #btn4,.box4{background:#3C0;}
  .box2,.box3,.box1,.box4{display:none;}
  #btn0.current,#btn1.current,#btn2.current,#btn3.current,#btn4.current{border:1px solid #000;}
</style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
  $(function(){
    $("#btn li").click(function(){
      $(this).addClass("current").siblings().removeClass("current");
      var n=$("#btn li").index(this);
      $(".box"+n).show().siblings("div").hide();
    });
  });
</script>
</head>
<body>
  <div id="wrap">
    <h2>انقر على الزر المناسب لإظهار الصندوق باللون المناسب</h2>
    <ul id="btn">
      <li id="btn0" class="current">0</li>
      <li id="btn1">1</li>
      <li id="btn2">2</li>
      <li id="btn3">3</li>
      <li id="btn4">4</li>
    </ul>
    <div class="box0">صندوق الأول</div>
    <div class="box1">صندوق الثاني</div>
    <div class="box2">صندوق الثالث</div>
    <div class="box3">صندوق الرابع</div>
    <div class="box4">صندوق الخامس</div>
  </div>
</body>
</html>

صورة التشغيل كما يلي:

بالنسبة للمزيد من المعلومات المتعلقة بjQuery، يمكن للقراء المهتمين الاستفسار عن مواضيع هذا الموقع: 'تجميع تقنيات تحكم العناصر في jQuery'، 'تجميع تقنيات التوسيع في jQuery'، 'تجميع الاستخدامات الشائعة والإضافات في jQuery'، 'تجميع تقنيات التأثيرات والتدريبات في jQuery'، 'تجميع تقنيات تحكم جدول البيانات (table) في jQuery'، 'تجميع استخدامات Ajax في jQuery'، 'تجميع التأثيرات والأنيمات الشائعة في jQuery'، 'تجميع استخدامات الأنيمات والتأثيرات في jQuery'، و 'تجميع استخدامات المحددات في jQuery'.

آمل أن يساعدك ما ذكرته في هذا المقال في تصميم برامج jQuery.

بيان: محتويات هذا المقال تم جمعها من الإنترنت، ملكية المقال للمالك الأصلي، تم جمع المحتويات من قبل المستخدمين عبر الإنترنت وتحميلها بشكل تلقائي، هذا الموقع لا يمتلك حقوق الملكية، لم يتم تعديل المحتويات بشكل يدوي ولا يتحمل أي مسؤولية قانونية. إذا كنت قد وجدت محتوى يشتبه في حقوق النسخ، فمرحبًا بمراسلتنا عبر البريد الإلكتروني: notice#oldtoolbag.com (يرجى استبدال #بـ @ عند إرسال البريد الإلكتروني) للإبلاغ، وقدم الدليل على الأدلة، إذا تم التحقق من ذلك، سيتم حذف المحتوى المشبوه فورًا.

دليل الأساسيات

من المحتمل أن تفضلها