如何将某些元素包装成相同的父元素？

Question

我有这样的标记：

​

<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>

​

我正在尝试开发一个函数，传递给与索引相对应的数字，将所有的跨度封装在一个span中的这些索引之间。假设我们将数字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>

​

Answer 1

从可以用于index()实例的所有跨范围的集合开始。

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

​

function wrapSpans(start, end) {
  var $cont = $('.span-container'),
     //collection of all spans
    $spans = $cont.children();
  // loop all the containers and filter children to wrap
  $cont.each(function() {
    $(this).children('span').filter(function() {
      var idx = $spans.index(this); // index within all spans collection     
      return idx >= (start - 1) && idx <= end;
    }).wrapAll('<span class="wrapped">');
  });
}

wrapSpans(3, 12)

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>

​

Answer 2

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

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

然后在这个部分中找到所有的跨度，使用每一个来检查每一个跨度。

var thisId = parseInt(value.id.replace('index-', ''));得到这个跨度的int id。

如果thisId ==启动？把这个跨度包起来。或者，如果thisId介于开始和开始之间，请将其包装，因为这是部分的开始(索引== 0)。

对于span的其余部分，检查它是开始/结束还是等于结束，使用.wrapped在appendTo范围内移动这个div。prev()将找到prev元素。

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

​

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);

.wrapped {
  background: red;
}

span {
  margin: 2px;
  padding: 0;
}

<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>

​