Поиск дочернего элемента в jquery

305

14 декабря 2017, 00:46

Есть вот такой блок для перелистывания "страниц" таблицы. Когда их очень много.

<div id="pages">
    <div class="ui grid">
        <div class="three wide column">
            <div class="ui small right labeled input fluid">
                <input type="text">
                <div class="ui basic label">из 125</div>
            </div>
        </div>
        <div class="column">
            <div class="ui small basic icon buttons">
                <button class="ui button">
                    <i class="arrow left icon"></i>
                </button>
                <button class="ui button">
                    <i class="arrow right icon"></i>
                </button>
            </div>
        </div>
    </div>
</div>

Пытаюсь сделать его повторно используемым. В метод для настройки событий кнопок и поля ввода, передаю id и функцию события. И тут начинаются странности:

$("#pages") - находит элемент

var node = $("#pages");
node.find("input");

не находит элемент

var node = $("#pages");
node.find("button.ui.button").has("i.arrow.left.icon");

не находит элемент

UPD

По поводу динамики, вот что забыл упомянуть: <div id="pages"> - это vue объект, у него есть условие, если кол-во страниц больше 10ти, показывать в качестве содержимого <div class="ui grid">, если меньше - другое. И самое странное, в блоке v-if поиск работает, а в v-else - нет.

Метод по привязке событий к кнопкам вызывается так, чтобы учитывать внесенные изменения:

vuePages.$nextTick(function(){initInput(jqSelector, event);});

При этом получить input из $("#pages") на чистом js получилось без проблем

Answer 1

Вот делаю лог просто на вашем коде, и все находит так как нужно.

Возможно что вы просто не сохранили найденные элементы в какой нибудь переменной.

$(document).ready(function(){ 
  var node = $("#pages"); 
  var tmp = node.find("input"); 
  console.log(tmp); 
   
  tmp = node.find("button.ui.button").has("i.arrow.left.icon"); 
   
  console.log(tmp); 
   
   
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="pages"> 
  <div class="ui grid"> 
      <div class="three wide column"> 
          <div class="ui small right labeled input fluid"> 
              <input type="text"> 
              <div class="ui basic label">из 125</div> 
          </div> 
      </div> 
      <div class="column"> 
          <div class="ui small basic icon buttons"> 
              <button class="ui button"> 
                  <i class="arrow left icon"></i> 
              </button> 
              <button class="ui button"> 
                  <i class="arrow right icon"></i> 
              </button> 
          </div> 
      </div> 
  </div> 
</div>

Answer 2

$(function(){ 
    console.log("First:"); 
    var node = $("#pages"); 
    console.log(node.find("button.ui.button").has("i.arrow.left.icon").length); 
     
    console.log("Second:"); 
    console.log($("#pages").find("button.ui.button").has("i.arrow.left.icon").length); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="pages"> 
    <div class="ui grid"> 
        <div class="three wide column"> 
            <div class="ui small right labeled input fluid"> 
                <input type="text"> 
                <div class="ui basic label">из 125</div> 
            </div> 
        </div> 
        <div class="column"> 
            <div class="ui small basic icon buttons"> 
                <button class="ui button"> 
                    <i class="arrow left icon"></i> 
                </button> 
                <button class="ui button"> 
                    <i class="arrow right icon"></i> 
                </button> 
            </div> 
        </div> 
    </div> 
</div>

Если просто смотреть на статический код, то все работает, как видите на примере.

Скорее всего ваша страница динамически что-то заменяет, дорисовывает или модифицирует что-то, и вы в динамическом DOM уже не находите элементы, который видели в статическом стартовом варианте кода.

Используйте любой отладчик, есть во всех современных браузерах, F12 по умолчанию, и посмотрите на элементы Инспектором. Он покажет именно динамическое состояние.

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Есть ли метод в google map для районов

Вот пример отрисовки региона на google map, есть ли в гугл апи метод чтобы районы сами так обрисовывались вместо того чтобы самому рисовать?

246

javascript

Поиск плагина для скролла

всем привет, на сайте поставил плагин https://githubcom/Prinzhorn/skrollr но он на телефоне работает просто ужасно

190

javascript

Програмно изменить стиль вывода

С помощью JSF выводится элемент SelectManyMenu, источник заполнения - ArrayList, каждому стрингу в БД соответствует булевый флагТребуется, при заполнении...

186

javascript

Строка режима работы

Есть массив

161