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

Badraoui · 22 نوفمبر 2015

أريد تحديد عنصر في قائمة عن طريق مكتبة 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')

تم التعديل في 22 نوفمبر 2015 بواسطة Badraoui

E.Nourddine · 23 نوفمبر 2015

يمكنك استعمال : (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

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

السؤال

Badraoui

رابط هذا التعليق

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

1 جواب على هذا السؤال

Recommended Posts

E.Nourddine

رابط هذا التعليق

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

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية