Question

是否可以使用jQuery进行操作？

这是普通的HTML代码：

<figure> 
    <a href="">
        <img src="" alt="More info" title="">
    </a>
    <figcaption>More info</figcaption>
</figure>

但我希望jQuery用它做到这一点：

<figure> 
    <a href="">
        <img src="" alt="More info" title="">
        <figcaption>More info</figcaption>
    </a>
</figure>

Answer 1

当您有多个元素时，可以使用appendTo()。 .each()可用于迭代，这里使用各种DOM遍历方法找到前一个锚，然后使用appendTo()。

＆＃13;

$('figcaption').each(function() {
  var prevAnchor = $(this).closest('figure').find('a'); //$(this).prev('a');
  $(this).appendTo(prevAnchor);
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<figure>
  <a href="">
    <img src="" alt="More info" title="">
  </a>
  <figcaption>More info</figcaption>
</figure>
<figure>
  <a href="">
    <img src="" alt="More info" title="">
  </a>
  <figcaption>More info</figcaption>
</figure>

＆＃13;

Answer 2

尝试：您可以使用.append()方法在锚标记内添加figcaption。见下面的代码

$('figure a').append('figure figcaption');

Answer 3

是的，您可以使用以下内容：.appendTo();

$(document).ready(function() {
  $("figcaption").appendTo("a");
});

  
<figure>
  <a href="">
    <img src="" alt="More info" title="">
  </a>
  <figcaption>More info</figcaption>
</figure>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

jquery在其他标签周围放置一个标签

3 个答案: