jquery - 改变jquery中X个单元格的背景

Question

我需要使表单选择框更改其下方列表中的列表项单元格的背景颜色，以适应从下拉框中选择的数字。

因此，如果用户从下拉列表中选择 6，则前 6 个 UL 列表项应更改其背景，以便它们看起来已被选中。

当下拉列表更改时，应该使用ajax将此值保存到数据库

我需要使用 jquery 执行此操作，但我陷入困境，我需要知道如何更改前 X 数量的列表项背景颜色并使下拉列表更改上的 AJAX 调用。

如果用户甚至没有触摸数字下拉列表就进入该页面，则会使用从数据库中提取的数字来选择该页面，因此如果从数据库中选择下拉列表为 12，则前 12 个列表项应具有不同的背景颜色。因此，仅在更改下拉列表时执行此操作是行不通的，因为它应该考虑是否已从数据库设置了值。

下面是它的基本 html 部分，以显示我需要更改的内容。

有擅长jquery的人可以帮我吗？

<select name="topfriendNumber">
    <option value="3">3</option>
    <option value="6">6</option>
    <option value="9">9</option>
    <option value="12">12</option>
</select>



<ul id="topfriends">
    <li friendID="0">
        <div>User 0</div>
    </li>
    <li friendID="1">
        <div>User 1</div>
    </li>
    <li friendID="2">
        <div>User 2</div>
    </li>
    <li friendID="3">
        <div>User 3</div>
    </li>
    <li friendID="4">
        <div>User 4</div>
    </li>
    <li friendID="5">
        <div>User 5</div>
    </li>
    <li friendID="6">
        <div>User 6</div>
    </li>
    <li friendID="7">
        <div>User 7</div>
    </li>
    <li friendID="8">
        <div>User 8</div>
    </li>
    <li friendID="9">
        <div>User 9</div>
    </li>
    <li friendID="10">
        <div>User 10</div>
    </li>
    <li friendID="11">
        <div>User 11</div>
    </li>
</ul>

Answer 1

如果您使用lt selector，您只需几行即可完成此操作。 :

$('select[name=topfriendNumber]').change(function() {
    var val = $(this).val();

    //reset style
    $('ul#topfriends > li').css("background-color", "");

    //apply to all LIs before value of select
    $('ul#topfriends > li:lt(' + val + ')').css("background-color", "red");
}).change();