jQuery試圖動態插入另一個div的HTML？

Question

這真的很難解釋。 我在表格中有一些帶有id的div

<table id="dgAvailable">
  <tr> <td> <div id="HEYD"> </td> </tr> <tr> <td> <div id="HANW"> </td> </tr> 
</table>

我需要用這些內容填充這些div

<div class="evenprop"><h3>Hanworth</h3><span class="locid" style="display:none">HANW</span></div>
<div class="evenprop"><h3>Heydon</h3><span class="locid" style="display:none">HEYD</span></div>

所以我需要獲取包含與我的其他div相同id的locid的div然后在表dgAvailable中的div中插入該html

$('#dgAvailable > tr > td > div').each(function(){
  if $(this).attr('id') = $('.evenprop > .locid').attr('id') {
  $(this).html() = $('.evenprop > .locid').parent().html()
});

我真的沒有別的方法來描述這個嗎？

謝謝

傑米

Answer 1

應該這樣做。

$('.locid').each(function(){
   $('#'+$.trim($(this).text())).html(this.parentNode.cloneNode(true));
});

Answer 2

試試這個：

$("div.evenprop .locid").each(function() {
   $("#" + this.innerHTML).html($(this).parent().clone());
});

您可以在此處針對您的標記嘗試演示 。

---

如果您可以控制其他標記，則可以使用數據屬性清理它，如下所示：

<div class="evenprop" data-locid="HANW"><h3>Hanworth</h3></div>
<div class="evenprop" data-locid="HEYD"><h3>Heydon</h3></div>

然后你的jQuery也變得更簡單了，像這樣：

$("div.evenprop").each(function() {
   $("#" + $(this).attr('data-locid')).html($(this).clone());
});

或者，如果您不需要舊節點並且只想移動它，請使用.append() ，如下所示：

$("div.evenprop").each(function() {
   $("#" + $(this).attr('data-locid')).append(this);
});