javascript - Jquery nth-child 仅适用于第一个和最后一个子级

Question

我在使用第n个子选择器时遇到了一些麻烦，它适用于第一个和最后一个 child ，在第二个 child 上它变得疯狂，在第三个 child 上它根本不起作用(请参阅jsfiddle):

https://jsfiddle.net/6r7261Lq/2/

HTML:

<div id="selezioni">
<a href="#" class="costi" data-costo="0"><img src="immagini/crystal.png" alt="0">
<h2>0</h2></a>
<a href="#" class="costi" data-costo="1"><img src="immagini/crystal.png" alt="1">
<h2>1</h2></a>
<a href="#" class="costi" data-costo="2"><img src="immagini/crystal.png" alt="2">
<h2>2</h2></a>
<a href="#" class="costi" data-costo="10"><img src="immagini/crystal.png" alt="10">
<h2>10</h2></a>
<a href="#" class="costi" data-costo="3"><img src="immagini/crystal.png" alt="3">
<h2>3</h2></a>

Javascript:

$(document).ready(function(){
$('#selezioni a').on('click', function() {
c = $(this).data('costo');

    if (c === 0){
    $('#selezioni h2:first').css("color", "red");
    $('#selezioni h2:not(:first)').css("color", "black");
    }
    else if (c === 1){
        $('#selezioni h2:nth-child(2)').css("color", "red");
        $('#selezioni h2:not(:nth-child(2))').css("color", "black");
    }
    else if (c === 2){
        $('#selezioni h2:nth-child(3)').css("color", "red");
        $('#selezioni h2:not(:nth-child(3))').css("color", "black");
    }
    else if (c === 10){
        $('#selezioni h2:nth-child(4)').css("color", "red");
        $('#selezioni h2:not(:nth-child(4))').css("color", "black");
    }
    else if (c === 3){
        $('#selezioni h2:last').css("color", "red");
        $('#selezioni h2:not(:last)').css("color", "black");
  }
 });
 });

我对此很生气......

Answer 1

:first-child、:last-child 和 :nth-child 均定位元素相对于其父元素的位置。 h3 始终只是 :last-child 因为它是其父级的最后一个子级。 :first 也与 :first-child 不同。 :first 将返回某物的第一个实例。 :first-child 将定位父级中的第一个子级。

如果我理解最终目标，您希望使用 :nth-child 定位 a 元素，然后定位 h3 内部那个a。

$(document).ready(function() {
  $('#selezioni a').on('click', function() {
    c = $(this).data('costo');

    if (c === 0) {
      $('#selezioni a:first h2').css("color", "red");
      $('#selezioni a:not(:first) h2').css("color", "black");
    } else if (c === 1) {
      $('#selezioni a:nth-child(2) h2').css("color", "red");
      $('#selezioni a:not(:nth-child(2)) h2').css("color", "black");
    } else if (c === 2) {
      $('#selezioni a:nth-child(3) h2').css("color", "red");
      $('#selezioni a:not(:nth-child(3)) h2').css("color", "black");
    } else if (c === 10) {
      $('#selezioni a:nth-child(4) h2').css("color", "red");
      $('#selezioni a:not(:nth-child(4)) h2').css("color", "black");
    } else if (c === 3) {
      $('#selezioni a:last h2').css("color", "red");
      $('#selezioni a:not(:last) h2').css("color", "black");
    }
  });
});

#selezioni{
	position: absolute;
	top: 10px;
}
h2 {
	position: absolute;
	top: -23px;
	padding-left: 10px;

}
.costi {
	float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="selezioni">
	<a href="#" class="costi" data-costo="0"><img src="immagini/crystal.png" alt="0">
	<h2>0</h2></a>
	<a href="#" class="costi" data-costo="1"><img src="immagini/crystal.png" alt="1">
	<h2>1</h2></a>
	<a href="#" class="costi" data-costo="2"><img src="immagini/crystal.png" alt="2">
	<h2>2</h2></a>
  <a href="#" class="costi" data-costo="10"><img src="immagini/crystal.png" alt="10">
	<h2>10</h2></a>
	<a href="#" class="costi" data-costo="3"><img src="immagini/crystal.png" alt="3">
	<h2>3</h2></a>
  </div>

我不确定最终目标到底是什么，但相同的功能可以写得更简单。切换您单击的元素上的类并使用 CSS 更改颜色 https://jsfiddle.net/6r7261Lq/5/