Question

请参考以下代码段：

<ul class="form-picker radio" id="select-template-type">
    <li value="1" class="use-template-type selected">Use Template</li>
    <li value="2" class="custom-template-type">Custom Violation</li>
    <input type="hidden" id="template_type_id" name="" value="">
</ul>

我想在类加载时将类selected应用于第二个li，但是失败。这是我尝试过的：

$( '#select-template-type').eq(2).addClass('selected');

点击后，我还需要触发该li。

Answer 1

您可以使用nth-child

$(function(){

  $("ul.form-picker li").removeClass("selected");
  $("ul.form-picker li:nth-child(2)").addClass("selected");

});

.selected
{
 border: solid 1px red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="form-picker radio" id="select-template-type">
                <li value="1" class="use-template-type selected">Use Template</li>
                <li value="2" class="custom-template-type">Custom Violation</li>
                <input type="hidden" id="template_type_id" name="" value="">
            </ul>

Answer 2

您可以通过多种方式进行操作

$('#select-template-type').children().eq(1).addClass("selected")

OR

$('#select-template-type li:eq(1)').addClass("selected")

第二个列表项应被选中

2 个答案: