jquery选择器问题答案

【问题标题】：jquery selectors problemjquery选择器问题
【发布时间】：2010-11-25 21:20:13
【问题描述】：

当涉及到从数据库填充的页面时，我在使用 jquerys 选择器时遇到问题。

数据库会填充一个，它将在每行显示 4 个<li> 标签，对应 x 行。

我正在尝试使用 addClass 为 <ul> 的每一行的第一个和最后一个结果提供不同的类。

我已经尝试过 :first 和 :last 但这些显然只会将所需的类添加到第一个结果和最后一个结果中。我需要添加到每行 4 的第一和最后。

我当前的代码是：

   $(document).ready(function(){
    $("ul#display li.thumbs:first").addClass("start");
    $("ul#display li.thumbs:last").addClass("end");
  });

示例 HTML

    <ul>
    <li><a href="/images/">image 1</a></li>
    <li><a href="/images/">image 2</a></li>
    <li><a href="/images/">image 3</a></li>
    <li><a href="/images/">image 4</a></li>
    <li><a href="/images/">image 5</a></li>
    <li><a href="/images/">image 6</a></li>
    <li><a href="/images/">image 7</a></li>
    <li><a href="/images/">image 8</a></li>
    <li><a href="/images/">image 9</a></li>
    <li><a href="/images/">image 10</a></li>
    <li><a href="/images/">image 11</a></li>
    <li><a href="/images/">image 12</a></li>
    </ul>

【问题讨论】：

您能否举例说明至少两三行的 HTML 的外观？
所以标记是：
- something
- something
- something
- something
.. 或者是否有多组 4 行。您的问题的措辞好像页面上可能有超过 4 个
，但可能没有。

【解决方案1】：

请参阅this question 的已接受答案，这基本上涉及使用each() 以及索引号i。应用模数运算符来查看每个元素在四个集合中的位置：

$(document).ready(function(){
    $("#display li.thumbs").each(function(i) { 
        if (i % 4 == 0) 
           $(this).addClass("start");
        if (i % 4 == 3) 
           $(this).addClass("end");
    });
});

【讨论】：

【解决方案2】：

您可以使用nth-child 选择器：

$("ul li:nth-child(4n-3)").addClass("start");
$("ul li:nth-child(4n)").addClass("end");

用您的标记检查sample。

【讨论】：

【解决方案3】：

http://docs.jquery.com/Selectors

这是来自我test page 在“点击查看一些 jquery 选择器”下的一些示例代码：

    // JS THAT DO THE JOB FOR JQUERY SELECTORS
    $('#jquerySelectorsUl li:nth-child(7)').addClass('alert');
    $('#jquerySelectorsUl li a[title=test]').addClass('alert');
    // JS THAT DO THE JOB FOR LI ADD/REMOVE
    var i = $('#addRemove li').size();
    $('#add').click(function() {
        i++;
        $('<li>' + i + '</li>').appendTo('#addRemove');
    });
    $('#remove').click(function() {
        $('#addRemove li:last').remove();
        if (i != 0){
            i--;
        };
    });

也许这会对你有所帮助，即使它不是很直接的答案...... :)

【讨论】：

【解决方案4】：

$(document).ready(function(){
    $("ul#display li.thumbs:first-child").addClass("start");
    $("ul#display li.thumbs:last-child").addClass("end");
});

first-child 和 last-child 检索列表项，如果它们是其直接父项的第一个/最后一个子项。所以如果<ul>和第一个<li class="thumbs">之间有一个不带class="thumbs"的列表项，那么就不会匹配到第一个选择器。

【讨论】：

不幸的是，这不起作用，因为它只选择
- 标签，而不是每行的第一个和最后一个。

【解决方案5】：

我喜欢在这样的情况下改变我的想法：有多少个构成一个集合：

    var per_set = 4;
    $('ul li').each(function(index){
        if (index % per_set === 0) {
            $(this).addClass("start");
        } else if (index % per_set === (per_set-1)) {
            $(this).addClass("end");
        }
    });

【讨论】：