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

我需要获取span标签内的a标签的href属性，并将其插入到整个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>

我可以获取每个 a 标签 中的 href 属性，但是我不知道如何将其附加到每个 inner-wrap div 上。目前为止，这是我所做的：

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

我知道这很简单，但我无法解决问题。请问有人能帮忙吗？

这是一个可行的jsfiddle链接

- s develop

---

为什么您想要在结果中使用嵌套锚点？ - nnnnnn

我认为这是错误的代码...一个锚点标签内部包含了另一个锚点标签。 - Jishnu V S

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>

- Satpal

Answer 2

这样做可能效果不佳，因为链接内部不能再有链接，但是一般的想法是用一个标签包装.inner-wrap的$.html()，并将$fetchLink作为href属性。

$('.inner-wrap').each(function() {
  $this = $(this);
  $fetchLink = $this.children('span').find('a').attr('href');
  $this.html('<a href="'+$fetchLink+'">'+$this.html()+'</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>

- Michael Coker