jquery - 使用jquery合并多个相同的html元素

Question

我喜欢只在 div 中移动文本，使其类似于:

 <div class="field-item even">
 Job1<p><a href="">Name1</a></p>
 </div>

等等...

我喜欢合并并删除所有 .field-name-field-brief-text-team div

请帮忙...谢谢

 <div class="field field-name-field-team field-type-entityreference">
   <label>Team</label>
   <div class="field-items">

     <div class="field-item even">
     <p><a href="">Name1</a></p>
     </div>

    <div class="field-item odd">
    <p><a href="">Name2</a></p>
    </div>

    <div class="field-item even">
      <p><a href="">Name3</a></p>
    </div>

   </div>
 </div>

<div class="field field-name-field-brief-text-team field-type-text">
    <div class="field-items">

    <div class="field-item even">Job1</div>
    <div class="field-item odd">Job2</div>
    <div class="field-item even">Job3</div>

</div>
</div>

Answer 1

我相信这可以满足您的要求:

$('.field-name-field-brief-text-team .field-item').each(function (i) {
    var to = $('.field-item').eq(i)[0],
        toFirst = to.getElementsByTagName('*')[0],
        from = this,
        txt = document.createTextNode(this.textContent);
    to.insertBefore(txt,toFirst);
}).remove();

JS Fiddle demo .

上面的版本略有改变，使用另一种方式从 jQuery 选择器检索 DOM 节点(使用 get(0) )并查找 to 的第一个子元素。节点( to.firstChild )。这些只是替代方案，并不一定比以前的方法更推荐:

$('.field-name-field-brief-text-team .field-item').each(function (i) {
    var to = $('.field-item').eq(i).get(0),
        toFirst = to.firstChild,
        from = this,
        txt = document.createTextNode(this.textContent);
    to.insertBefore(txt,toFirst);
}).remove();

JS Fiddle demo .

编辑以提供最快的(根据 JS Perf )方法:

$('.field-name-field-brief-text-team .field-item').each(function (i) {
    var to = $('.field-item')[i]
        toFirst = to.firstChild,
        txt = document.createTextNode(this.textContent);
    to.insertBefore(txt,toFirst);
}).remove();

JS Fiddle demo .

<小时/>

编辑以添加请求的内容(在下面的评论中):到正文:

$('.field-name-field-brief-text-team .field-item').each(function (i) {
    var to = $('.field-item')[i]
    toFirst = to.firstChild,
        txt = document.createTextNode(this.textContent + ': ');
    to.insertBefore(txt, toFirst);
}).remove();

JS Fiddle demo .

引用文献:

• jQuery:
  • each() .
  • get() .
  • remove() .
• 纯 JavaScript:
  • document.createTextNode() .
  • firstChild .
  • getElementsByTagName() .
  • insertBefore() .