Таргетирование div внутри идентификатора переменной, найденного с использованием класса

Question

Пожалуйста, со мной, как только я начинаю с jQuery.

То, что я в основном имеет дело с необходимостью добавлять различные идентификаторы и HREF, а также данные, родительский атрибут несколько элементов внутри DIV «MyId» - из которых я хотел бы вернуть идентификатор DIV с данным классом: ".template-none .section-accordion .accordion".

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

Теперь эти являются рядными, но при проверке по всей видимости, имеют index из -1, что означает, что они, вероятно, не рассматриваются как перечисленные элементы. Я рассматриваю использование .sibling, но боролся с реализацией, поскольку я не знал бы идентификатор до его создания.

У меня он работает в настоящее время, , но, jQuery, который у меня ниже, принимает идентификатор и индекс только первого элемента и не укладывает каждый экземпляр отдельно. Я знаю, что это, наверное, что-то очень простое, что я пропустил.

Итак, в заключение, я хотел бы достичь:

1. Таргетинг все элементы с классом «шаблон-ни .section-аккордеона .accordion», и возвращая идентификатор.
2. Используя этот теперь идентификатор переменной ID, я хотел бы настроить таргетинг на дочерние элементы .accordion, .accordion-toggle и .accordion-body, чтобы добавить идентификаторы и элементы.
3. Убедитесь, что каждый экземпляр "template-none .section-accordion .accordion" оформлен в соответствии с его родительским или отдельным элементом и применяет его ко всем экземплярам "template-none .section-accordion .accordion", а не для каждого идентификатора.

Я надеюсь, что имеет смысл и действительно ценю ваш вклад

Вот что я до сих пор:

jQuery(window).load(function() { 

    // sort accordions and add id's based on parents 

    var index = jQuery(".template-none section.section-accordion").index(this); 

    var myId = jQuery(".template-none .section-accordion").prop("id"); 

    jQuery(".template-none .section-accordion .accordion").attr("id", myId + index) 
    jQuery(".template-none .section-accordion .accordion-toggle").attr("data-parent", myId + index) 

    jQuery(".template-none .section-accordion .accordion-body").attr("id", myId + index + 'body') 
    jQuery(".template-none .section-accordion .accordion-toggle").attr("href", '#' + myId + index + 'body') 

}); 

Answer 1

Первые вопросы:

• Вы должны каждый раздел, чтобы обрабатывается по отношению к себе как текущий контекст. На данный момент ваш код проходит document до index, поскольку это контекст готовности DOM.
• У вас есть идентификатор в секции, начинающейся с #, которая недействительна.

Вместо итерации ваших разделов (например, с помощью each) и изменять узлы относительно этого раздела (например, с использованием находки из этого раздела).

Пример:

jQuery(function ($) { 
    // sort accordions and add id's based on parents 
    var index = jQuery(".template-none section.section-accordion").each(function (index) { 
     var myId = $(this).attr('id'); 
     $(this).find(".accordion").attr("id", myId + index); 
     $(this).find(".accordion-toggle").attr("data-parent", myId + index).attr("href", '#' + myId + index + 'body'); 
     $(this).find(".accordion-body").attr("id", myId + index + 'body'); 
    }); 
}); 

JSFiddle играть: http://jsfiddle.net/TrueBlueAussie/w1bg5gwq/7/

Примечания:

• jQuery(function($){...}); это удобный ярлык для jQuery(document).ready(function(){...});, который также предоставляет локальную $ переменную, так что вы можете имеют более короткий стандартный код jQuery.
• Хотя вы генерируете уникальные идентификаторы элементов потомков в каждом разделе, вам обычно лучше работать с классами.