2015-09-17 3 views
0

Для перетаскиваемых divs в JS на моей странице я хочу сохранить последнее местоположение в локальном хранилище, чтобы при обновлении пользователя перетаскиваемые элементы на странице оставались на месте.Найти первый идентификатор любого потомка с помощью jQuery

Мой HTML, вообще говоря, как это:

<div id="some_id" class="draggable"> 
    <p>I am a draggable thing.</p> 
</div> 

Затем я использую id в div в качестве ключа в локальном хранилище, так что наличие нескольких перетаскивать объектов на странице не приводит к их всему времени учитывая ту же позицию при обновлении.

Однако шаблоны, как это иногда используется в качестве шаблона, который обрабатывает видимость, так что иногда они будут выглядеть так:

<div class="visibility_container draggable"> 
    <button class="close_button">Close</button> 
    <div id="some_id"> 
     <p>I am a draggable thing.</p> 
    </div> 
</div> 

Обратите внимание, что draggable класс добавляется программно каждый раз.

Эти шаблоны могут меняться, но никогда не будет иметь id сек внутри них - они будут довольно жуткие шаблоны, если они - так что мне нужно только найти первый элемент-потомок, который имеет id и использовать значение этого id, как мой локальный ключ хранения.

Как найти ближайший элемент с JS? Я знаю, что jQuery имеет метод .closest(), который находит ближайшего предка - мне нужно идти в противоположном направлении. Я также знаю о jQuery's .find(), который может найти меня всех потомков, соответствующих селектору, но я не уверен, что могу гарантировать порядок, в котором jQuery возвращает этих детей, поскольку the API docs не были ясны в этом вопросе.

+1

Does' .find() 'не делать трюк? – somethinghere

+0

*" Эти шаблоны могут отличаться, но никогда не будут иметь идентификаторов внутри них - они были бы довольно ужасными шаблонами, если бы они это сделали, поэтому мне нужно только найти первый элемент-потомк, который имеет идентификатор, и использовать значение этого идентификатора в качестве моего локального ключа хранения ». * Если у них нет 'id' в них, как вы можете найти первый элемент внутри них, который имеет 'id'? –

+0

У самих шаблонов есть части, которые можно заменить - я использую довольно отвратительную замену строк , поэтому шаблон имеет строку%% content% 'где-то, например, и заменяется на' div # some_id' при создании страницы. –

ответ

4

Я также в курсе .find JQuery (в), которые могут меня найти всех потомков, соответствующих селектор, но я не уверен, я могу гарантировать порядок, в котором Jquery возвращает эти дети, как API документы не были ясны по этому вопросу.

find перечислены элементы в порядке документа (так называемый «DOM порядка») (и ты прав, я удивлен не увидеть четкое заявление о том, что в документации). «Порядок документов» - это четко определенный термин DOM, это означает поиск по глубине элементов-потомков. Или по-другому: тот, текст которого сначала в разметке.

Так, например:

<div id="container"> 
    <div> 
     <div> 
      <div id="one"></div> 
    </div> 
    <div id="two"></div> 
</div> 

... тогда

console.log($("#container").find("[id]").first().attr("id")); 

... зарегистрирует one, а не two.

Эта вещь для заказа документов является общей для большинства методов jQuery API и DOM, таких как querySelectorAll, getElementsByTagName и т. Д. Мне не повезло найти четкую формулировку этого в документации jQuery, хотя это похоже на надзор. Самое близкое, что я нашел до сих пор, немного документирует исключение (например, говоря here, что «Второй и третий ... создайте объект jQuery, используя один или несколько элементов DOM, которые были уже выбраны в некоторых других way ... В отличие от большинство других многоэлементных операций jQuery, элементы не сортируются в порядке DOM.« [мой акцент].) В документах multiple selector также указывается, что результаты будут указаны в порядке документа (а не в порядке выбора).

Смежные вопросы