• 0

هل بإمكاني إعطاء قيمة سالبة لـ ()nth-child: من أجل تحديد عنصر في قائمة؟

أريد تحديد عنصر في قائمة عن طريق مكتبة Jquery بالشكل التالي:

$('button').click(function(){
  $('ul').find('li:nth-child(2)').css('color', '#f00')
})

وكود html:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>Glen</li>
  <li>Tane</li>
  <li>Ralph</li>
  <li>David</li>
</ul>

<button>Draw it</button>

اريد تحديد العنصر Ralph من القائمة، فهل من الممكن استعمال رقم سلبي لفعل ذلك، مثلا هل يمكنني استعمال (eq(-2. لتعيين هذا العنصر عن طريق javcaScript؟

بهذا الشكل:

$('ul').find('li:nth-child(-2)').css('color', '#f00')

 

تمّ تعديل بواسطة Badraoui

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

يمكنك استعمال :  (nth-last-child(2:  .

حيث ستتمكن من تحديد العنصر انطلاقًا بالعد ابتداء من العنصر الأخير، ليصبح كود تحديد العنصر ما قبل الأخير على الشكل التالي:

$('ul').find('li:nth-last-child(2)').css('color', '#f00')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>Glen</li>
  <li>Tane</li>
  <li>Ralph</li>
  <li>David</li>
</ul>

<button>Draw it</button>

مثال على استعمال  nth-last-child:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>nth-last-child demo</title>
  <style>
  button {
    display: block;
    font-size: 12px;
    width: 100px;
  }
  div {
    float: left;
    margin: 10px;
    font-size: 10px;
    border: 1px solid black;
  }
  span {
    color: blue;
    font-size:18px;
  }
  #inner {
    color: red;
  }
  td {
    width: 50px;
    text-align: center;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div>
  <button>:nth-last-child(even)</button>
  <button>:nth-last-child(odd)</button>
  <button>:nth-last-child(3n)</button>
  <button>:nth-last-child(2)</button>
</div>
<div>
  <button>:nth-last-child(3n+1)</button>
  <button>:nth-last-child(3n+2)</button>
</div>
<div>
  <table>
    <tr><td>John</td></tr>
    <tr><td>Karl</td></tr>
    <tr><td>Brandon</td></tr>
    <tr><td>Benjamin</td></tr>
  </table>
</div>
<div>
  <table>
    <tr><td>Sam</td></tr>
  </table>
</div>
<div>
  <table>
    <tr><td>Glen</td></tr>
    <tr><td>Tane</td></tr>
    <tr><td>Ralph</td></tr>
    <tr><td>David</td></tr>
    <tr><td>Mike</td></tr>
    <tr><td>Dan</td></tr>
  </table>
</div>
<span>tr<span id="inner"></span></span>
 
<script>
$( "button" ).click(function() {
  var str = $( this ).text();
  $( "tr" ).css( "background", "white" );
  $( "tr" + str ).css( "background", "#ff0000" );
  $( "#inner" ).text(str);
});
</script>
 
</body>
</html>

nth-last-child() Selector

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن