使用jQuery为每个div添加一个标记

Question

这是当前的代码:

  <div class="main-wrap">
    <div class="inner-wrap">
        some content here
        <span>
           <a href="1">test1</a>
        </span>
    </div>

    <div class="inner-wrap">
      some content here
      <span>
        <a href="2">test2</a>
      </span>
    </div>

    <div class="inner-wrap">
      some content here
      <span>
         <a href="3">test3</a>
     </span>
    </div>
 </div>

我要取href attr的a tag范围内span tag,将其插入到整个inner-wrap元素.像这样的东西:

  <div class="main-wrap">
    <div class="inner-wrap">
      <a href="1">
        some content here
        <span>
           <a href="1">test1</a>
        </span>
      </a>
    </div>

    <div class="inner-wrap">
     <a href="2">
      some content here
      <span>
        <a href="2">test2</a>
      </span>
     </a>
    </div>

    <div class="inner-wrap">
     <a href="3">
      some content here
      <span>
         <a href="3">test3</a>
     </span>
    </div>
   </a>
 </div>

我可以获取每个的href标签,a tag但我很困惑如何将它附加到每个inner-wrapdiv.这是我到目前为止所做的:

$('.inner-wrap').each(function(){
    $this = $(this);
    $fetchLink = $this.children('span').find('a').attr('href');
    console.log($fetchLink);
});

我知道这真的很简单,但我无法解决.有人可以帮忙吗？

这是工作的jsfiddle

Answer 1

您可以使用wrapInner(),但是,您不应该将锚嵌套在另一个锚元素中.

$('.inner-wrap').wrapInner(function(i) {
  var $this = $(this);
  var a = $this.children('span').find('a');
  var href = a.attr('href');

  //Remove inner anchor
  a.replaceWith(a.text());

  return "<a href='" + href + "'></a>";
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-wrap">
  <div class="inner-wrap">
    some content here
    <span>
           <a href="1">test1</a>
        </span>
  </div>

  <div class="inner-wrap">
    some content here
    <span>
        <a href="2">test2</a>
      </span>
  </div>

  <div class="inner-wrap">
    some content here
    <span>
         <a href="3">test3</a>
     </span>
  </div>
</div>