2017-02-27 5 views
3

を使用してDIV:は、それぞれにタグを追加。これは、現在のコードであるjQueryの

<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 taga taghref attrをフェッチし、全体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 tagのhrefタグを取得することができますが、私は、各inner-wrap div要素に付加する方法を混同しています。これはこれまで私が行ってきたことです:

私はこれが本当にとても簡単だと知っていますが、私は回避することはできません。誰かが助けてくれますか?ここ

は、あなたがリンク内のリンクを持つことができないので、これは非常にうまく仕事に行くのではなく、一般的なアイデアは、それがa$.html()を包んだと.inner-wrap$.html()を交換することであるjsfiddle

+0

は、なぜあなたはその結果で、ネストされたアンカーをしたいですか? – nnnnnn

+0

私はその間違ったコードを考えています。アンカータグの中のアンカータグ –

答えて

5

、しかし、あなたは他のアンカー要素の中ではない巣アンカーを必要があります。

$('.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>

+0

これははるかにクリーンなコードです。 +1 –

1

を働いていますタグ$fetchLinkhref属性として使用します。あなたはwrapInner()を使用することができます

$('.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>

関連する問題