jQuery中如何不使用类/ID选择第二个h2标签？代码失效求助

首先，你之前用h2:nth-child(2)失效的原因很明确：在<a class="gamelink">这个父元素里，子元素的顺序是<img>（第1个子元素）→ <h2 class="title">（第2个）→ <h2 class="date">（第3个），所以:nth-child(2)选中的是标题那个h2，不是你要的日期h2，这就导致排序逻辑出错了。

下面给你几个不用依赖.date类名的可行方案，你可以根据后续代码修改的需求选择：

方案1：用:nth-of-type(2)按元素类型计数 #

:nth-of-type()是针对相同元素类型来计数的，在<a>的子元素里，第二个<h2>就是你要的日期标签，这个选择器不会被中间的<img>干扰：

$('#datereleased').on('click', function(){ 
    var $sortContainer = $('#sortcontainer'); 
    $sortContainer.append( 
        $sortContainer.children().sort(function(a, b){ 
            return ( 
                parseInt($("h2:nth-of-type(2)", b).attr('id'), 10) - 
                parseInt($("h2:nth-of-type(2)", a).attr('id'), 10) 
            ); 
        }).get() 
    ); 
});

方案2：用:not()排除已知的其他h2 #

如果标题h2的.title类名不会变动，你可以排除这个类来选中目标h2：

$('#datereleased').on('click', function(){ 
    var $sortContainer = $('#sortcontainer'); 
    $sortContainer.append( 
        $sortContainer.children().sort(function(a, b){ 
            return ( 
                parseInt($("h2:not(.title)", b).attr('id'), 10) - 
                parseInt($("h2:not(.title)", a).attr('id'), 10) 
            ); 
        }).get() 
    ); 
});

方案3：通过id属性定位 #

观察你的HTML结构，只有日期h2带有id属性，标题h2没有，所以可以用属性选择器h2[id]来精准定位：

$('#datereleased').on('click', function(){ 
    var $sortContainer = $('#sortcontainer'); 
    $sortContainer.append( 
        $sortContainer.children().sort(function(a, b){ 
            return ( 
                parseInt($("h2[id]", b).attr('id'), 10) - 
                parseInt($("h2[id]", a).attr('id'), 10) 
            ); 
        }).get() 
    ); 
});

这三个方案都不需要依赖.date类名，后续修改类名也不会影响功能，你可以根据自己的代码维护计划选最合适的~

内容的提问来源于stack exchange，提问作者Richard Hewett