使用HTML/Javascript動態創建div的訪問元素

我對JavaScript和JQuery編程頗爲陌生。通常情況下，訪問元素我給他們一個id，這樣我就可以讓他們像$("#"+id).blabla().使用HTML/Javascript動態創建div的訪問元素

但現在我需要動態創建一個div，和裏面的訪問元素。

喜歡的東西

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

什麼是訪問和識別每個內部的div的最佳做法？我爲他們生成另一個ID？還是什麼？

我沒有選擇器的理論完全清楚。

編輯：修改這個問題從確定一個單一的內部div來確定的div amongs其中不乏

來源

2012-07-18 cdarwin

我碰到同樣的問題就來了，你在2012年做了我所生成的夫婦html元素的循環中，並給他們這樣的ID標識=「元素」 +我，現在我不知道如何訪問它們？我以同樣的方式在你的問題中解釋了上面的內容，但那不起作用。你適應的解決方案是什麼讓這件事情起作用？謝謝。 – Superman 2015-01-06 10:28:46

可以維持當你生成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();

這裏，^=是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

你的答案很有趣，但問題稍有不同：我需要分配「名稱」（id？）並訪問外部div內的多個元素。通過你的問題的啓發，我想我可能會產生像DIV1，div1-1 subids，DIV 1-2 – cdarwin 2012-07-18 18:30:55

@cdarwin意思，而不是'id'你需要'name'屬性容器（外）'div'？ e.g''

，而不是''

它 – thecodeparadox 2012-07-18 18:33:56

並不重要到外層div指定名稱或ID，我的意思是，我是有興趣進入內部的div，而不是外部的。我總是隻用「$（ID）」，但我看到，發現接受相同的選擇爲$呢，所以我知道我可以用你的建議，在找兼職過多，如$（...）。找到（」 div [id]'），對嗎？ – cdarwin 2012-07-18 20:13:36

它通常是一個很好的做法，如果你已經到外層div參考，只是從那裏使用搜索找。

你可以給它一個id，或者如果你想使用更一般的方法，你可以使用類。

<div class="subdiv">... 


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

來源

2012-07-18 18:07:16 ChrisThompson

很多方法可以創建一個元素，並給他一個id或class，或者使用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 2012-07-18 18:14:34

通常，當你創建它們，你可以直接在他們指定的事件處理程序和喜歡。就像這樣：

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

我知道，但如果以後什麼，我需要訪問該分區的subdiv？問題就在於此 – cdarwin 2012-07-18 18:22:29

如果緩存，你可以使用類似的div：

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

使用HTML/Javascript動態創建div的訪問元素

回答

相關問題