Question

我对javascript和JQuery编程很新。通常，为了访问元素，我给它们一个id，所以我可以像$("#"+id).blabla().

那样得到它们

但现在我需要动态创建一个div，并访问其中的元素。

像

这样的东西

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

访问和识别每个内部div的最佳做法是什么？我为他们生成另一个id？或者是什么？

我没有完全清楚选择者的理论。

编辑：修改了从识别单个内部div到识别其中许多div的问题

Answer 1

您可以在生成id时维护模式。例如：

如果您始终生成id，例如：myid1，myid2，myid3 ......

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

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

......

然后你可以尝试：

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

OR

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

此处^=以选择器开头，因此div[id^=myid]会选择div以id开头的myid。

您还可以使用包含~=的单词选择器，并使用类似$('div[id~=myid]')的内容。这将选择div，id包含单词myid。

如果您想使用其他属性，请代替id，例如。 name然后更改选择器，如：

$('div[name^=myid]')或$('div[name~=myid]')。

Answer 2

这通常是一种很好的做法，如果你已经有一个对外部div的引用，只能使用find从那里搜索。

您可以为其指定ID，或者如果您想使用更通用的方法，则可以使用类。

<div class="subdiv">...


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

Answer 3

通常，在创建它们时，您可以直接在它们上分配事件处理程序和类似的东西。像这样：

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/

Answer 4

您可以通过多种方式创建元素并为其提供ID或类，或使用DOM来访问它。

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

另一种方式

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

Answer 5

使用id：

访问元素中的div

$("#automaticallyGeneratedId div").whatever

Answer 6

如果你缓存div，你可以使用类似的东西：

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

Answer 7

创建一个委托的侦听器，在侦听器中，您可以通过执行此操作找到该元素

//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
    }
  }
});

使用HTML / Javascript访问动态创建的div中的元素

7 个答案: