用div中的第一个锚包装div

Question

我需要将base64个div包含在每个div中的第一个链接中。我有多个方框，当我点击我的div时，如果我的锚点href为.wrapMe而不是go www.nnn.com，则所有div都有一个锚点。

www.nnn.com

$(document).ready(function() {
  $(".wrapMe").each(function() {
    var $a = $('a', this);
  });
})

.historyBox {
  width: 300px;
  padding: 10px;
  background: rgba(0, 0, 0, .8);
  color: #FFF;
  margin: 10px;
}

.historyBox a {
  color: #FFF;
}

Answer 1

假设你想要这个

<div class="historyBox wrapMe">
  <a href="http://www.youtube.com" class="historyName">Employe ID,Employe Name,ADFHSD</a>

  <span>22 news</span>
</div>

成为

<a href="http://www.youtube.com" class="historyName">
    Employe ID,Employe Name,ADFHSD
    <div class="historyBox wrapMe">

      <span>22 news</span>
    </div>
</a>

然后为每个.wrapMe找到其a，将a移至父级，然后将.wrapMe移至a。

$(".wrapMe").each(function() {
    var a = $(this).find("a");
    a.appendTo(this.parentNode);
    a.append(this);
});

$(document).ready(function() {
$(".wrapMe").each(function() {
    var a = $(this).find("a");
    a.appendTo(this.parentNode);
    a.append(this);
});
})

.historyBox {
  width: 300px;
  padding: 10px;
  background: rgba(0, 0, 0, .8);
  color: #FFF;
  margin: 10px;
}

.historyBox a {
  color: #FFF;
}

<div class="historyForm">

  <div class="historyBox wrapMe">
    <a href="http://www.google.com" class="historyName">Name,Surname,Bla Bla</a>

    <span>17 news</span>
  </div>


  <div class="historyBox wrapMe">
    <a href="http://www.youtube.com" class="historyName">Employe ID,Employe Name,ADFHSD</a>

    <span>22 news</span>
  </div>

</div>

<!-- history -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

这假设这些.wrapMe div是他们父母中唯一的东西，这对我来说可能是一个愚蠢的假设。因此，不要使用a.appendTo(this.parentNode)，而是a.insertBefore(this)：

$(".wrapMe").each(function() {
    var a = $(this).find("a");
    a.insertBefore(this);
    a.append(this);
});

$(document).ready(function() {
$(".wrapMe").each(function() {
    var a = $(this).find("a");
    a.insertBefore(this);
    a.append(this);
});
})

.historyBox {
  width: 300px;
  padding: 10px;
  background: rgba(0, 0, 0, .8);
  color: #FFF;
  margin: 10px;
}

.historyBox a {
  color: #FFF;
}

<div class="historyForm">

  <div class="historyBox wrapMe">
    <a href="http://www.google.com" class="historyName">Name,Surname,Bla Bla</a>

    <span>17 news</span>
  </div>


  <div class="historyBox wrapMe">
    <a href="http://www.youtube.com" class="historyName">Employe ID,Employe Name,ADFHSD</a>

    <span>22 news</span>
  </div>

</div>

<!-- history -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

使用wrapAll将所有.wrapMe div包装在锚标记内。

参考代码：

＆＃13;

＆＃13;

$(document).ready(function() {
  $(".wrapMe").each(function() {
    $(this).wrapAll("<a href='"+ $(this).find("a").attr("href") +"' />")
  });
})

＆＃13;

.historyBox {
  width: 300px;
  padding: 10px;
  background: rgba(0, 0, 0, .8);
  color: #FFF;
  margin: 10px;
}

.historyBox a {
  color: #FFF;
}

＆＃13;

<div class="historyForm">

  <div class="historyBox wrapMe">
    <a href="http://www.google.com" class="historyName">Name,Surname,Bla Bla</a>

    <span>17 news</span>
  </div>


  <div class="historyBox wrapMe">
    <a href="http://www.youtube.com" class="historyName">Employe ID,Employe Name,ADFHSD</a>

    <span>22 news</span>
  </div>

</div>

<!-- history -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

＆＃13;

＆＃13;

Answer 3

这样的东西？ Jsfiddle Demo。代码如下。

$('div.wrapMe').each(function() {
  var newDiv = $('<div/>').addClass('wrappedUp');
  $(this).before(newDiv);
  var next = $(this).next();
  newDiv.append(this).append(next);
});

.wrappedUp {
    color: red;
    border: 1px solid purple; 
}

outside
<div class="wrapMe">blah</div>
<div class="wrapMe">blah blah blah</div>
outside
<div class="wrapMe">blah blah</div>
<div class="wrapMe">blah blah</div>
outside
<div class="wrapMe">blah blah</div>
<div class="wrapMe">blah blah</div>
outside