的案例-1：

Question

我有这样的HTML：

<span class="section2 section4">hello</span>
<span class="section1">World</span>

<div class="tab" id="tab1"></div>
<div class="tab" id="tab2"></div>
<div class="tab" id="tab3"></div>
<div class="tab" id="tab4"></div>
<div class="tab" id="tab5"></div>

我需要一个能够给我这个结果的jquery函数：

<div class="tab" id="tab1"><span class="section1">World</span></div>
<div class="tab" id="tab2"><span class="section2">hello</span></div>
<div class="tab" id="tab3"></div>
<div class="tab" id="tab4"><span class="section4">hello</span></div>
<div class="tab" id="tab5"></div>

到目前为止我的尝试：

$.each($(".tab"), function() {
    var id = $(this).attr('id').substring(3);

    if ($(".section" + id).length == 0) {
        return true;
    }
    $(".section" + id).removeClass("section" + id).appendTo($(this));
})

如何改善我的正确工作功能？

JSFiddle

Answer 1

迭代div并根据id中的数字附加克隆的span元素。使用迭代元素的append() method with callback并追加回调返回值。

＆＃13;

// get all span with classname start with `section`
var $sec = $('span[class^=section]');

// iterate over div element and append the returned value
$('div.tab').append(function() {
  // generate the class name from id
  var cls = 'section' + this.id.match(/\d+$/)[0];
  // filter element from $sec
  return $sec.filter('span.' + cls)
    // clone the element
    .clone()
    // updaet the class to remove other class name
    // you can also use `prop('className',cls)`
    .attr('class', cls);
});

// remove the span elements from dom
$sec.remove();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="section2 section4">hello</span>
<span class="section1">World</span>

<div class="tab" id="tab1"></div>
<div class="tab" id="tab2"></div>
<div class="tab" id="tab3"></div>
<div class="tab" id="tab4"></div>
<div class="tab" id="tab5"></div>

＆＃13;

更新：如果您想维护其他类或跨度，请执行类似的操作。

＆＃13;

// get all span with classname start with `section`
var $sec = $('span[class^=section]');

var $tab = $('div.tab');

// generate classnames based on tabs for removing later
var remove = $tab.map(function() {
  return 'section' + this.id.match(/\d+$/)[0];
}).get().join(' ');

// iterate over div element and append the returned value
$tab.append(function() {
  // generate the class name from id
  var cls = 'section' + this.id.match(/\d+$/)[0];
  // filter element from $sec
  return $sec.filter('span.' + cls)
    // clone the element
    .clone()
    // remove other class name
    .removeClass(remove).addClass(cls);
});

// remove the span elements from dom
$sec.remove();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="section2 section4">hello</span>
<span class="section1 section8">World</span>

<div class="tab" id="tab1"></div>
<div class="tab" id="tab2"></div>
<div class="tab" id="tab3"></div>
<div class="tab" id="tab4"></div>
<div class="tab" id="tab5"></div>

＆＃13;

Answer 2

您的代码中的问题是您只是删除原始元素并附加到类似的id div，而section2和section4 span是相同的，所以当脚本适用于第4个div时，它会从第2个元素中删除并追加到第4位。

您需要使用.clone()并让原始范围位于其中，只需克隆它并附加所需数量的div并使用css隐藏初始范围。

 $.each($(".tab"), function() {
   var id = $(this).attr('id').substring(3);

   if ($(".span_wrap .section" + id).length != 0) {
     $(".span_wrap  .section" + id).removeClass("section" + id).clone().appendTo($(this));
   }

 })

.span_wrap span {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="span_wrap">
  <span class="section2 section4">hello</span>
  <span class="section1">World</span>
</div>

<div class="tab" id="tab1"></div>
<div class="tab" id="tab2"></div>
<div class="tab" id="tab3"></div>
<div class="tab" id="tab4"></div>
<div class="tab" id="tab5"></div>

Answer 3

尝试脚本像这样

$.each($(".tab"), function() {
    var id = $(this).attr('id').substring(3);    
    $('span').each(function(){
        var str = $(this).attr('class');
        var str1 = str.toString();
       if(str1.indexOf('section'+id) > -1){           
           $("#tab"+id).append("<span class='section"+id+"'>"+$('.section'+id).text()+"</span>");
       } 
    });
});

Answer 4

<强> demo link

 $.each($(".tab"), function() {
   var id = $(this).attr('id').substring(3);

   if ($(".section" + id).length == 0) {
     return true;
   }
   var _this = $(this);
   var _section = $(".section" + id);
   _section.removeClass("section" + id);
   var _clonedSection = _section.clone();
   _clonedSection.appendTo(_this);
   _this.appendTo('#conteiner');

 })
 $("#tmp").remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="conteiner">
</div>

<div id="tmp">
  <span class="section2 section4">hello</span>
  <span class="section1">World</span>

  <div class="tab" id="tab1"></div>
  <div class="tab" id="tab2"></div>
  <div class="tab" id="tab3"></div>
  <div class="tab" id="tab4"></div>
  <div class="tab" id="tab5"></div>
</div>

结果html：

<div id="conteiner">
  <div class="tab" id="tab1"><span class="">World</span></div>
  <div class="tab" id="tab2"><span class="">hello</span></div>
  <div class="tab" id="tab4"><span class="">hello</span><span class="">hello</span></div>
</div>

Answer 5

如果您正在使用支持.prop（）的新版jQuery，请尝试以下方法：

var origSections=[];
$.each($(".tab"), function() {
    var id = $(this).prop('id').substring(3);
    var sections=$(".section" + id);
    if (sections.length === 0) {
        return true;
    }

    sections.each(function(){
        origSections.push($(this));
        var section=$(this).clone();
        section.removeClass().addClass("section" + id);
        section.appendTo($('#tab'+id));
       });
});
$.each(origSections,function(){
  $(this).remove();
});

否则，试试这个：

var origSections=[];
$.each($(".tab"), function() {
    var id = $(this).attr('id').substring(3);
    var sections=$(".section" + id);
    if (sections.length === 0) {
        return true;
    }

    sections.each(function(){
        origSections.push($(this));
        var section=$(this).clone();
        section.removeClass().addClass("section" + id);
        section.appendTo($('#tab'+id));
       });
});
$.each(origSections,function(){
  $(this).remove();
});

Answer 6

可能有两个案例描述如下：

的案例-1：

如果附加id的{{1}}连续增加，即div，那么您可以享受每个元素tab1, tab2, tab3 ...的好处。

Bellow是执行任务的优化代码。

"index"

的案例-2：

如果附加$.each($(".tab"), function(index) { element_index = ++index; if ( $('.section'+ element_index ).length ){ html_text = $(".section"+element_index).html(); $(this).html('<span class="section">'+html_text+'</span>'); } });的{{1}}没有连续增加，即id，那么您需要检查该元素是否存在。

Bellow是执行任务的优化代码。

＆＃13;
＆＃13;
div
＆＃13;
tab1, tab5, tab3, tab6 ...
＆＃13;
＆＃13;
＆＃13;

如何在多元素JQuery中追加

6 个答案:

的案例-1：

的案例-2：