Используя jQuery, как мне обернуть теги <a> в тег <p> в родительском div.

У меня нет никакого контроля над HTML для добавления уникальных классов. Пожалуйста, помогите, спасибо ..

Мой текущий HTML:

<div class="content">
    <a href="#" class="anchor">some anchor link</a>
    <a href="#" class="anchor">some anchor link</a>
    <p>some paragraph content</p>
</div>
<div class="content">
    <a href="#" class="anchor">some anchor link</a>
    <a href="#" class="anchor">some anchor link</a>
    <p>some paragraph content</p>
</div>

Мой текущий jQuery:

$( ".anchor" ).wrapAll( "<p class='new'></p>" );

Мой текущий результат:

<div class="content">
  <p class="new">
    <a href="#" class="anchor">some anchor link</a>
    <a href="#" class="anchor">some anchor link</a>
    <a href="#" class="anchor">some anchor link</a>
    <a href="#" class="anchor">some anchor link</a>
  </p>
  <p>some paragraph content</p>
</div>
<div class="content">
  <p>some paragraph content</p>
</div>

Но я хочу получить такой результат:

<div class="content">
  <p class="new">
    <a href="#" class="anchor">some anchor link</a>
    <a href="#" class="anchor">some anchor link</a>
  </p>
  <p>some paragraph content</p>
</div>
<div class="content">
  <p class="new">
    <a href="#" class="anchor">some anchor link</a>
    <a href="#" class="anchor">some anchor link</a>
  </p>
  <p>some paragraph content</p>
</div>
0
Rajesh B 6 Окт 2021 в 10:05

2 ответа

Лучший ответ

Вам нужен .each с уровня содержания

$(".content").each(function() {
  $(this).find(".anchor").wrapAll("<p class='new'></p>");
})
.new  { background-color: grey }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
  <a href="#" class="anchor">some anchor link</a>
  <a href="#" class="anchor">some anchor link</a>
  <p>some paragraph content</p>
</div>
<div class="content">
  <a href="#" class="anchor">some anchor link</a>
  <a href="#" class="anchor">some anchor link</a>
  <p>some paragraph content</p>
</div>
1
mplungjan 6 Окт 2021 в 07:08

Вы можете перебрать класс «.content», найти все привязки и обернуть их. что-то вроде ниже.

$(document).ready(function(){
$(".content").each(function() {
  let current=$(this);
  current.find(".anchor").wrapAll("<p class='new'></p>");
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
    <a href="#" class="anchor">some anchor link</a>
    <a href="#" class="anchor">some anchor link</a>
    <p>some paragraph content</p>
</div>
<div class="content">
    <a href="#" class="anchor">some anchor link</a>
    <a href="#" class="anchor">some anchor link</a>
    <p>some paragraph content</p>
</div>
0
Negi Rox 6 Окт 2021 в 07:12