Доступ к элементам внутри динамически созданных divs с HTML/Javascript

Я довольно новичок в программировании javascript и JQuery. Обычно для доступа к элементам я даю им идентификатор, поэтому я могу получить их как $("#"+id).blabla().Доступ к элементам внутри динамически созданных divs с HTML/Javascript

Но теперь мне нужно динамически создать div и получить доступ к ним внутри.

Что-то вроде

<div id="automaticallyGeneratedId"> 
    <div ???></div> <!-- first div --> 
    <div ???></div> <!-- second div --> 
</div>

Каковы лучшие практики для доступа и идентификации каждого из внутренних див? Я создаю для них еще один идентификатор? Или что?

У меня нет полностью теории селекторов.

редактировать: модифицировал вопрос от идентификации одного внутреннего DIV для идентификации дивы amongs многие из них

источник

2012-07-18 cdarwin

Я столкнулся с той же проблемой, что и в 2012 году. Я создал пару элементов html внутри цикла и дал им идентификаторы, подобные этому id = "element" + i, теперь я не знаю, как получить к ним доступ ? Я пробовал так же, как вы объяснили выше в своем вопросе, но это не сработало. Какое решение вы адаптируете, чтобы заставить эту вещь работать? Благодарю. – Superman

Вы можете сохранить шаблон, когда вы генерируете id. Например:

если вы всегда генерировать id как: myid1, myid2, myid3 ...

<div id="myid1"> 
    <div></div> 
</div> 

<div id="myid2"> 
    <div></div> 
</div> 

......

, то вы можете попробовать:

$('div[id^=myid]').find('div').foo();

ИЛИ

$('div[id^=myid] div').foo();

Здесь , ^= is s торт с селектором, поэтому div[id^=myid] выберет div, чья id начнется с myid.

Вы также можете использовать переключатель слова «Содержащий слово», который равен ~=, и использовать как $('div[id~=myid]'). Это будет выбираться div с id содержит слово myid.

Вместо id, если вы хотите использовать другой атрибут, например. name затем сменить селектор:

$('div[name^=myid]') или $('div[name~=myid]').

источник

2012-07-18 18:09:56 thecodeparadox

ваш ответ интересный, но вопрос немного другой: мне нужно назначить «имена» (ids?) И получить доступ к ряду элементов внутри внешнего div. Будучи вдохновленным вашим вопросом, я думаю, что я мог бы создавать субады, такие как div1, div1-1, div 1-2 – cdarwin

@cdarwin, а это означает, что вместо 'id' вам нужен атрибут' name' для контейнера (внешнего) 'div'? например, '

' вместо '

' – thecodeparadox

Не важно назначать имя или id внешнему div, я имел в виду, что мне было интересно получить доступ к внутренним divs, а не к внешнему. Я всегда использовал только «$ (id)», но я вижу, что find принимает те же селекторы, что и $, поэтому я понимаю, что я также могу использовать ваше предложение в части поиска, например $ (...). Find (' div [id] '), правильно? – cdarwin

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

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

<div class="subdiv">... 


$('#automaticallyGeneratedId').find('div.subdiv')

источник

2012-07-18 18:07:16 ChrisThompson

Много способов вы можете создать элемент и дать ему Id или класса, или использовать DOM для доступа к нему ..

$("html").prepend('<div id="foo"></div>'); 
$("#foo").doSomething();

другой путь

$("#automaticallyGeneratedId").find("div").doSomething();

источник

2012-07-18 18:08:51 user1475195

Чтобы получить доступ к DIV в элементе с идентификатором:

$("#automaticallyGeneratedId div").whatever

источник

2012-07-18 18:12:35

Я могу иметь много div внутри внешнего div, поэтому мне нужен точный способ их идентификации – cdarwin

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

var div = $('<div></div>'); 
div.on('click', function() { 
    // Do something when the generated div is clicked 
}); 

// Then, add it to the DOM 
$('body').append(div);

Вам не нужно беспокоиться, выбирая их с ID или классы, они уже доступны в вашем коде.

Другой способ - использовать пузырьки событий для обработки вновь созданных элементов того же класса. Хорошая ссылка об этом это одна: http://beneverard.co.uk/blog/understanding-event-delegation/

источник

2012-07-18 18:18:57

Я знаю, но что, если позже мне нужно получить доступ к подразделению этого div? Вопрос в том, что – cdarwin

Если вы кэшировать дивы вы могли бы использовать что-то вроде:

var myDiv1Child = $('div', myDiv1);

источник

2012-07-18 18:20:48

Создание делегированного слушателя и внутри слушателя вы можете найти элемент, делая это

//If a div inside the parent is clicked then execute the function within 
$('.PARENT_CLASS').click("div", function(){ 
//This variable holds all the elements within the div 
var rows = document.querySelector('.PARENT_CLASS').getElementsByTagName('div'); 
for (i = 0; i < rows.length; i++) { 
    rows[i].onclick = function() { 
     console.log(this); //The element you wish to manipulate 
    } 
    } 
});

источник

2017-06-02 11:52:52

Доступ к элементам внутри динамически созданных divs с HTML/Javascript

ответ

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