根据其 innerHtml 将 class 添加到一个列表项

Question

我想使用 jQuery 根据与跨度的 innerHtml 值匹配的 innerHtml 值在一个列表项上设置 class。

我已经成功编写了以下代码：

if ($(".number").text() === "1") {
      $("li:eq(0)").addClass("selected");
    }
    if ($(".number").text() === "2") {
      $("li:eq(1)").addClass("selected");
    }
    if ($(".number").text() === "3") {
      $("li:eq(2)").addClass("selected");
    }

.selected {
  background-color: #dFd;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="number">2</span> <ul id="menu"> <li>1</li> <li>2</li> <li>3</li> </ul>

不过，我觉得它可以做得更高效，写得更整洁。我该如何改进此代码？

Answer 1

你可以去掉所有的if，方法是首先将选定的值放入一个变量中，然后在设置class时将其用作参数：

var selected = parseInt($(".number").text(), 10) - 1;
$("li:eq("+selected+")").addClass("selected");

请注意，如果您希望将值限制为 1..3，如您的示例所示，您必须先设置 if (selected >= 1 && selected <= 3)，然后再设置 class。

根据其 innerHtml 将 class 添加到一个列表项

Add class to one list item based on its innerHtml

jquery

innerhtml