3

我对 javascript 和 JQuery 编程很陌生。通常，要访问元素，我会给它们一个 id，这样我就可以得到它们$("#"+id).blabla().

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

就像是

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

访问和识别每个内部 div 的最佳实践是什么？我为他们生成另一个ID？要不然是啥？

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

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

4

7 回答 7

6

您可以在生成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();

这里，^=是以选择器开头的，所以div[id^=myid]会选择div谁id以 开头myid。

您还可以使用包含单词选择器~=和使用 like $('div[id~=myid]')。这将选择div包含id单词myid。

而不是id如果你想使用其他属性，例如。name然后更改选择器，例如：

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

于 2012-07-18T18:09:56.407 回答
2

如果您已经有对该外部 div 的引用，则通常是一个很好的做法，只需使用 find 从那里进行搜索。

您可以给它一个 id，或者如果您想使用更通用的方法，您可以使用类。

<div class="subdiv">...


$('#automaticallyGeneratedId').find('div.subdiv')
于 2012-07-18T18:07:16.083 回答
1

通常，当您创建它们时，您可以直接在它们上分配事件处理程序等。像这样：

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-18T18:18:57.240 回答
0

您可以通过多种方式创建一个元素并给他一个 Id 或 Class，或者使用 DOM 来访问它。

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

其他方式

$("#automaticallyGeneratedId").find("div").doSomething();
于 2012-07-18T18:08:51.707 回答
0

使用 id 访问元素中的 div：

$("#automaticallyGeneratedId div").whatever
于 2012-07-18T18:12:35.263 回答
0

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

var myDiv1Child = $('div', myDiv1);
于 2012-07-18T18:20:48.063 回答
0

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

//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-02T11:52:52.483 回答