jQuery - 移动相关元素

在页面加载时，我想用div包装标题范围并将其移动到相关的body div的前面。即，将hApplicant1 span移动到tabApplicant1 div等的前面jQuery - 移动相关元素

如何编写jQuery来完成此操作？谢谢！

考虑：

<div> 
      <div id="header"> 
       <span id="hDummy"></span> 
       <span id="hApplicant1">James Smith</span> 
       <span id="hApplicant2">John Doe</span> 
       <span id="hApplicant3"></span> 
       <span id="hApplicant4"></span> 
      </div> 
      <div id="body"> 
       <div id="tabApplicant1">...</div> 
       <div id="tabApplicant2">...</div> 
      </div> 
</div> 
<div> 
      <div id="header2"> 
       <span id="h2Dummy"></span> 
       <span id="h2Applicant1">Black Smith</span> 
       <span id="h2Applicant2">Shoe Maker</span> 
       <span id="h2Applicant3"></span> 
       <span id="h2Applicant4"></span> 
      </div> 
      <div id="body2"> 
       <div id="tab2Applicant1">...</div> 
       <div id="tab2Applicant2">...</div> 
      </div> 
</div>

的结果应该是这样的：

<div> 
      <div id="header"> 
       <span id="hDummy"></span> 
       <span id="hApplicant3"></span> 
       <span id="hApplicant4"></span> 
      </div> 
      <div id="body"> 
       <div><span id="hApplicant1">James Smith</span></div> 
       <div id="tabApplicant1">...</div> 
       <div><span id="hApplicant2">John Doe</span><div> 
       <div id="tabApplicant2">...</div> 
      </div> 
</div> 
<div> 
      <div id="header2"> 
       <span id="h2Dummy"></span> 
       <span id="h2Applicant3"></span> 
       <span id="h2Applicant4"></span> 
      </div> 
      <div id="body2"> 
       <div><span id="h2Applicant1">Black Smith</span></div> 
       <div id="tab2Applicant1">...</div> 
       <div><span id="h2Applicant2">Shoe Maker</span><div> 
       <div id="tab2Applicant2">...</div> 
      </div> 
</div>

来源

2011-09-08 nandin

var $bodyDiv = $('#body'); 

$('#header span[id^=hApplicant]').each(function(){ 
    $bodyDiv.find('div[id=' + $(this).attr('id').replace('h', 'tab') + ']').before($(this).wrap('<div />').parent()); 
});

而这里的小提琴：http://jsfiddle.net/Hw2Gz/

这可以进一步简化（优化），但它应该让你开始正确的轨道。

编辑：

这可以重复：

var $bodyDiv = $('#body'), 
    $bodyDiv2 = $('#body2'); 

$('#header span[id^=hApplicant]').each(function(){ 
    $bodyDiv.find('div[id=' + $(this).attr('id').replace('h', 'tab') + ']').before($(this).wrap('<div />').parent()); 
}); 

$('#header2 span[id^=h2Applicant]').each(function(){ 
    $bodyDiv2.find('div[id=' + $(this).attr('id').replace('h', 'tab') + ']').before($(this).wrap('<div />').parent()); 
});

http://jsfiddle.net/Hw2Gz/1/

来源

2011-09-08 19:32:27

顾我们有同样的想法。只是想知道，你的最后是什么.parent（）？ –

@Joseph：我修改了我的问题，它现在有两个重复的容器div。你能帮助解决这个难题吗？谢谢！ – nandin

@Richard D - 检查您生成的代码。 'span [id^= hApplicant]'不包含在'div's中。这是因为他们被留在'＃头文件中。 –

$('#header span').each(function() { 
     var that = $(this); 
     var thatId = that.attr('id'); 
     var bodyDiv = $('#body #' + thatId.replace('h', 'tab')); 
     if (bodyDiv.length) 
      that.insertBefore(bodyDiv).wrap('<div/>'); 
    });

http://jsfiddle.net/cJtZc/3/

来源

2011-09-08 19:38:07

+1现在你很好。 –

jQuery - 移动相关元素

回答

相关问题