Как переключать динамически создаваемые div'ы на основе атрибутов класса и имени?

0

Я динамически создаю таблицу содержимого.

Уровни иерархии:

  • Родительский Div

    • Дети Div

      • Гранд Дети Div

Для этого я создаю div динамически.

Затем я назначаю разницу для этих div.

Родительское Div: - Нет поля

Дети Div: - margin-left :15px;

Grand Children Div: - margin-left :35px;

Поэтому я могу динамически создавать таблицу контента.

Проблема:

Я создал более одного родительского div и там sub divs по иерархии. Но если я применяю событие click для первого родительского div, тогда это событие также будет применяться к другому родительскому div, потому что я добавляю событие click на класс.

В этом клике я сталкиваюсь с проблемой в slideToggle(). Поскольку я использую класс, поэтому из-за этого он применяется и к другим.

Пример:

$('main_div').haml(['%div.g', {id:'g_' + i', name: i}, Parent Div]);//class = 'g'

$('main_div').haml(['%div.g1', {id:'g_' + i, name: i, style:'**margin-left: 15px**;'}, Children Div]);//class = 'g1'

$('main_div').haml(['%div.g2', {id:'g_' + i, name: i, style:'**margin-left: 35px**;'}, Grand Children Div]);//class = 'g2'

В этом значении div 'i' поступает из базы данных с помощью AJAX GET.

Итак, какие изменения я должен сделать для slideToggle(): В этом я просто хочу только переключить только дочерние родительские div?

Любые подсказки/предложения, пожалуйста?

Код ссылки:

$('#main_div').on('click','.g', function(){
  $('#main_div').find('.g1,.g2').slideToggle();

});
  • 0
    Покажите нам код, где вы применяете slideToggle ()
  • 0
    Есть ли у нас какой-либо другой метод, кроме этого, если у меня нет дочерних элементов div, но я хочу расположить их в формате parent, child и grand child?
Теги:
javascript-events

3 ответа

2

Если я правильно понимаю, slideToggle() - событие click для всех родителей div? Вместо функции вы можете использовать эту переменную.

$(this).find(...some selector for child divs...').slide..

Показать, пожалуйста, код для события клика?

  • 0
    Спасибо за ваше подтверждение. Я могу переключаться, но в одно время я хочу переключать детей одного из родителей, а не детей других родителей.
  • 0
    Да, только один, используйте 'find', чтобы найти детей в parent $ (this) .find ('. G1'). Slide (); // это найти только потомков в текущем родителе
Показать ещё 4 комментария
2

Попробуй это:

$('#main_div').on('click','.g', function(){
   $(this).find('.g1,.g2').slideToggle();
});

Когда JQuery вызывает обработчик щелчка он устанавливает this в щелкнутый пункт, то есть к .g элементу, поэтому применяется только .find() к этому элементу потомкам с помощью $(this).find(...

  • 0
    Пробовал это, но не переключаться.
  • 0
    Я понял. Выше работает нормально сейчас. класс g не был родительским для класса g1 и класса g2, поэтому он не работал. Спасибо
Показать ещё 5 комментариев
0

Следующая ссылочная ссылка решила мою проблему.

По щелчку slidetoggle div, но сначала скройте другие - jQuery

Спасибо другим людям.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню