0

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

数据库填充 a ，<li>对于 x 行，每行显示 4 个标签。

我正在尝试使用 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>
4

5 回答 5

3

请参阅此问题的已接受答案，该答案基本上涉及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");
    });
});
于 2009-09-05T14:43:33.460 回答
2

您可以使用第n 个子选择器：

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

使用您的标记检查示例。

于 2009-09-05T15:02:16.113 回答
1

http://docs.jquery.com/Selectors

这是我的测试页面中“单击查看一些 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--;
        };
    });

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

于 2009-09-05T14:36:31.663 回答
1 
$(document).ready(function(){
    $("ul#display li.thumbs:first-child").addClass("start");
    $("ul#display li.thumbs:last-child").addClass("end");
});

first-childlast-child如果它们是其直系父母的第一个/最后一个孩子，则检索列表项。因此，如果class="thumbs"在 the<ul>和 first之间有一个列表项<li class="thumbs">，则不会匹配到第一个选择器。

于 2009-09-05T14:37:19.557 回答
0

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

    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");
        }
    });
于 2009-09-05T15:11:35.727 回答