Добавить класс в один элемент списка на основе его innerHtml

Question 1

Я хочу использовать jQuery для установки класса в одном элементе списка на основе его значения innerHtml, соответствующего значению innerHtml диапазона.

Мне удалось написать следующий код:

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>

Тем не менее, я чувствую, что он может быть более эффективным и написанным более аккуратно. Как я могу улучшить этот код?

Question 2

Вы можете избавиться от всех, if сначала получить выбранное значение в переменную, а затем использовать это как параметр при настройке класса:

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

Обратите внимание, что если вы хотите ограничить значение до 1..3, как в вашем примере, вы должны иметь, if (selected >= 1 && selected <= 3) перед установкой класса.

Antti29 · Answer 1 · 2017-09-07T22:12:00+03:00

Вы можете избавиться от всех, if сначала получить выбранное значение в переменную, а затем использовать это как параметр при настройке класса:

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

Обратите внимание, что если вы хотите ограничить значение до 1..3, как в вашем примере, вы должны иметь, if (selected >= 1 && selected <= 3) перед установкой класса.

Добавить класс в один элемент списка на основе его innerHtml

Еще в рубрике

Другие вопросы