Блог

Главная - Вопросы по программированию - Сравните ближайший идентификатор с помощью .closest()

Сравните ближайший идентификатор с помощью .closest()

#javascript #jquery #console #operators #jquery-events

#javascript #jquery #консоль #операторы #jquery-события

Вопрос:

Я проверяю, является ли ближайший идентификатор selected классом toshow или нет. Из кода видно, что условие должно быть истинным, но оно показывает false в консоли.

  1. Почему он показывает false?
  2. Как я могу показать его значение true в консоли?
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo part 1</title>
</head>
<body>
    <div style="width:500px;">div (great-grandparent)
        <ul>ul (second ancestor - second grandparent) 
          <div id="toshow"">ul (first ancestor - first grandparent)
            <li>li (direct parent)
              <button class="selected">span</span>
            </li>
          </ul>
        </ul>   
      </div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
  console.log($(".selected").closest("[id]") == "toshow");
</script>
</html>

Ответ №1:

closest это функция выбора DOM. Результатом является ссылка на элемент. Вы хотите проверить соответствие id возвращаемого элемента:

   console.log($(".selected").closest("[id]").attr('id') == "toshow");
 
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo part 1</title>
</head>
<body>
    <div style="width:500px;">div (great-grandparent)
        <ul>ul (second ancestor - second grandparent) 
          <div id="toshow"">ul (first ancestor - first grandparent)
            <li>li (direct parent)
              <button class="selected">span</span>
            </li>
          </ul>
        </ul>   
      </div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
  console.log($(".selected").closest("[id]").attr('id') == "toshow");
</script>
</html>

Комментарии:

1. Это выглядит как хороший код. Почему бы не сделать его доступным для выполнения фрагментом?

2. Он уже есть. Это всего лишь дубликат фрагмента, опубликованного @nikhil_2001 в исходном вопросе, поэтому он может показать, что он регистрирует true после изменения.

Ответ №2:

Вы должны сравнить attr, его возвращающий элемент

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo part 1</title>
</head>
<body>
    <div style="width:500px;">div (great-grandparent)
        <ul>ul (second ancestor - second grandparent) 
          <div id="toshow"">ul (first ancestor - first grandparent)
            <li>li (direct parent)
              <button class="selected">span</span>
            </li>
          </ul>
        </ul>   
      </div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
  console.log($(".selected").closest("[id]").attr("id") == "toshow");
</script>
</html>