如何将一些元素包装在同一个父元素中？

时间：2017-05-21 15:32:34

标签： javascript jquery html

我有这种标记：

<div id = "main-region">
  <div id = "section-1">
    <p>
      <span id = "index-1">elementA</span>
      <span id = "index-2">elementB</span>
      <span id = "index-3">elementC</span>
      <span id = "index-4">elementD</span>
      <span id = "index-5">elementE</span>
    </p>
  </div>
  <div id = "section-2">
    <p>
      <span id = "index-6">elementF</span>
      <span id = "index-7">elementG</span>
      <span id = "index-8">elementH</span>
      <span id = "index-9">elementI</span>
      <span id = "index-10">elementJ</span>
    </p>
  </div>
  <div id = "section-3">
    <p>
      <span id = "index-11">elementK</span>
      <span id = "index-12">elementL</span>
      <span id = "index-13">elementM</span>
      <span id = "index-14">elementN</span>
      <span id = "index-15">elementO</span>
    </p>
  </div>
</div>

我正在尝试开发一个函数，传递给与索引相对应的数字，包含跨度中这些索引之间的所有跨度。假设我们将数字3和12传递给我们想要获得的函数：

<div id = "main-region">
  <div id = "section-1">
    <p>
      <span id = "index-1">elementA</span>
      <span id = "index-2">elementB</span>
      <span class = "wrapped">
        <span id = "index-3">elementC</span>
        <span id = "index-4">elementD</span>
        <span id = "index-5">elementE</span>
      </span>
    </p>
  </div>
  <div id = "section-2">
    <p>
      <span class = "wrapped">
        <span id = "index-6">elementF</span>
        <span id = "index-7">elementG</span>
        <span id = "index-8">elementH</span>
        <span id = "index-9">elementI</span>
        <span id = "index-10">elementJ</span>
      </span>
    </p>
  </div>
  <div id = "section-3">
    <p>
      <span class = "wrapped">
        <span id = "index-11">elementK</span>
        <span id = "index-12">elementL</span>
        <span id = "index-13">elementM</span>
      </span>
      <span id = "index-14">elementN</span>
      <span id = "index-15">elementO</span>
    </p>
  </div>
</div>

3 个答案:

答案 0 :(得分：4)

从可用于index()个实例的所有跨度的集合开始。

然后迭代每个父容器并在其子项上使用filter()来构建要使用wrapAll()包装的组

span {
  display: block
}

.wrapped {
  border: 1px solid green
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-region">
  <div id="section-1">
    <p class="span-container">
      <span id="index-1">elementA</span>
      <span id="index-2">elementB</span>
      <span id="index-3">elementC</span>
      <span id="index-4">elementD</span>
      <span id="index-5">elementE</span>
    </p>
  </div>
  <div id="section-2">
    <p class="span-container">
      <span id="index-6">elementF</span>
      <span id="index-7">elementG</span>
      <span id="index-8">elementH</span>
      <span id="index-9">elementI</span>
      <span id="index-10">elementJ</span>
    </p>
  </div>
  <div id="section-3">
    <p class="span-container">
      <span id="index-11">elementK</span>
      <span id="index-12">elementL</span>
      <span id="index-13">elementM</span>
      <span id="index-14">elementN</span>
      <span id="index-15">elementO</span>
    </p>
  </div>
</div>
karma.conf.js

答案 1 :(得分：0)

使用attr选择器获取每个部分的所有部分，首先，如果先前已包装或调用函数，则需要删除包装标记。

thisSection.find('.wrapped').contents().unwrap();

然后找到本节内的所有跨度，使用每个跨度来检查每个跨度。

var thisId = parseInt(value.id.replace('index-', ''));获取此跨度的int id

如果thisId ==开始？包裹这个跨度。或者如果thisId介于start和之间，请将其换行，因为这是该部分的开头（index == 0）

对于span的剩余时间，检查它是开始/结束还是等于结束，使用appendTo将此div移动到.wrapped范围内。 prev()会找到prev元素。

$(this).appendTo($(this).prev('.wrapped'));

＆＃13;
＆＃13; 
function wrapper(start, end) {
  $('[id^=section]').each(function(index) {
    var thisSection = $(this);
    //remove wrapped tag if previously wrapped
    thisSection.find('.wrapped').contents().unwrap();

    thisSection.find('span').each(function(index, value) {
      var thisId = parseInt(value.id.replace('index-', ''));
      //if start index between start/end OR start == thisId [do wrap]
      if ((index == 0 && start < thisId && thisId <= end) ||
        start == thisId) {
        $(this).wrap('<span class="wrapped"></span>');
      } else if (start < thisId && thisId <= end) {
        $(this).appendTo($(this).prev('.wrapped'));
      }
    })
  })
}

$('#start, #end').on('change', function() {
  wrapper($('#start').val(), $('#end').val())
})

wrapper(3, 12);
＆＃13; 
.wrapped {
  background: red;
}

span {
  margin: 2px;
  padding: 0;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="start" value="3" />
<input id="end" value="12" />

<div id="main-region">
  <div id="section-1">
    <p>
      <span id="index-1">elementA</span>
      <span id="index-2">elementB</span>
      <span id="index-3">elementC</span>
      <span id="index-4">elementD</span>
      <span id="index-5">elementE</span>
    </p>
  </div>
  <div id="section-2">
    <p>
      <span id="index-6">elementF</span>
      <span id="index-7">elementG</span>
      <span id="index-8">elementH</span>
      <span id="index-9">elementI</span>
      <span id="index-10">elementJ</span>
    </p>
  </div>
  <div id="section-3">
    <p>
      <span id="index-11">elementK</span>
      <span id="index-12">elementL</span>
      <span id="index-13">elementM</span>
      <span id="index-14">elementN</span>
      <span id="index-15">elementO</span>
    </p>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

这很好用：

function wrapSpans(x,y) {
  var wrapped='<span class="wrapped">';
  var section;
  for (var i=x;i<=y;i++) {
    wrapped+=('<span id="index-'+i+'">'+$('#index-'+i).text()+'</span>\n');
    $('#index-'+i).remove();
  	if (i%5===0) {
    	sectionP=$('#section-'+parseInt(i/5)+' p');
        sectionP.html(sectionP.html()+wrapped+'</span>');
        wrapped='<span class="wrapped">';
    } else if (i===y) {
       sectionP=$('#section-'+(parseInt(i/5)+1)+' p');
       wrapped+='</span>/n';
       $(wrapped).insertBefore(sectionP.find('#index-'+(i+1))); // to keep order, e.g: A B C D E with wrapSpans(2,3) => A [B C] D E
    }
  }
}
//for testing
wrapSpans(3,12);
#section-1 .wrapped {
  color:red;
}
#section-2 .wrapped {
  color:blue;
}
#section-3 .wrapped {
  color:magenta;
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id = "main-region">
  <div id = "section-1">
    <p>
      <span id = "index-1">elementA</span>
      <span id = "index-2">elementB</span>
      <span id = "index-3">elementC</span>
      <span id = "index-4">elementD</span>
      <span id = "index-5">elementE</span>
    </p>
  </div>
  <div id = "section-2">
    <p>
      <span id = "index-6">elementF</span>
      <span id = "index-7">elementG</span>
      <span id = "index-8">elementH</span>
      <span id = "index-9">elementI</span>
      <span id = "index-10">elementJ</span>
    </p>
  </div>
  <div id = "section-3">
    <p>
      <span id = "index-11">elementK</span>
      <span id = "index-12">elementL</span>
      <span id = "index-13">elementM</span>
      <span id = "index-14">elementN</span>
      <span id = "index-15">elementO</span>
    </p>
  </div>
</div>

相关问题
最新问题