Question

我动态添加了div元素，结构如下。

<div class="blogPost">
  <a href="link/to/full_artical">
    <h1>Some Heading</h1>
  </a>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
</div>

我想从a元素中删除h1包装，并将它们添加到父div元素中。结果应该是：

<a href="link/to/full_artical">
  <div class="blogPost">
     <h1>Some Heading</h1>
     <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
     </p>
  </div>
</a>

我希望jquery可能有unwrap()和wrap()个函数组合。

我无法访问此动态添加内容的来源。
正在动态添加div。

提前致谢。

修改

尝试

$('.blogPost').wrap('<a href="'+$(this).children('a').attr('href')+'"></a>')

不工作。

Answer 1

您可以使用.clone()复制a元素并将其存储在变量中。使用.unwrap()删除a的父h1，并使用.wrap()将复制的元素包裹在.blogPost周围。

＆＃13;

var clone = $("a").clone().children().remove().end();
$("h1").unwrap().parent().wrap(clone);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="blogPost">
  <a href="link/to/full_artical">
    <h1>Some Heading</h1>
  </a>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
</div>

＆＃13;

Answer 2

另一种方式：

＆＃13;

var href = $('.blogPost').children('a').attr('href');
$('.blogPost').wrap('<a href="'+href+'"></a>');
$('h1').unwrap();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="blogPost">
  <a href="link/to/full_artical">
    <h1>Some Heading</h1>
  </a>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
</div>

＆＃13;

Answer 3

var link = $('a'),
    heading = link.find('h1'),
    blogPost = $('.blogPost');

blogPost.prepend(heading);
blogPost.wrap(link);
link.remove();

查找unwrapped元素的父级，并使用jquery在.wrap（）中使用它

3 个答案:

CODEPEN