Question

我在使用nth-child选择器时遇到了一些麻烦，它在第一个和最后一个孩子上工作，在第二个孩子上它是狂野的，在第三个它根本不起作用（参见jsfiddle）：

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

:last-child，:nth-child和h3都是针对元素相对于父元素的目标。 :last-child始终只是:first，因为它是其父级的最后一个孩子。 :first-child也与:first不同。 :first-child将返回第一个实例。 a将定位父母中的第一个孩子。

如果我了解最终目标，您希望使用:nth-child定位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>

SELECT RollNumber, Geometry, geometry::UnionAggregate(Geometry_SPA.MakeValid()) AS Geometry_SPA
FROM     dbo.LegalParcel                                                
GROUP BY RollNumber, Geometry

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

Answer 2

可能使用nth-of-type（），因为html文档中的nth-child（）计数文本节点就像孩子一样

Answer 3

试试这个：

$('#selezioni a:nth-child(2) h2').css("color", "red");
$('#selezioni a:not(:nth-child(2)) h2').css("color", "black");

编辑： Michael Coker建议同样的事情，并且有更好的答案。

Answer 4

我会在将应该为红色的那个着色之前重置它们。

jQuery(function($){
  var $allH2 = $('#selezioni a h2');
  
  $('#selezioni a').on('click', function(e){
    e.preventDefault();
    $allH2.css('color', 'black');
    $(this).find('h2').css('color', 'red');
  });
});

<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>

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

4 个答案: