Question

我试图找到一种方法来为所有h3标签添加锚标签。内容本质上是动态的。

我想仅为所有h3标签添加动态锚标记

<div class="class1">
    <h2>Main heading</h2>
    <h3>Heading1</h3>
    <h1>some content1</h1>
    <h3>Heading2</h3>
    <h1>some content2</h1>
    <h3>Heading3</h3>
    <h1>some content3</h1>
</div>

我尝试了以下Jquery代码，但它没有创建任何内容

$("h3.class1").append('<h3>');
var al = $("h3.class1 >");

al.append('<a href="#"></a>');

Answer 1

使用wrap：

围绕匹配元素集中的每个元素包装HTML结构。

$('.class1 h3').wrap('<a />');

这将wrap h3 .class1 anchor内<object>个<object [...]>Your browser does not support this.</object>。

DEMO

Answer 2

尝试wrapInner()

＆＃13;

$('.class1 h3').wrapInner('<a href="#"></a>')

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="class1">
  <h2>Main heading</h2>
  <h3>Heading1</h3>
  <h1>some content1</h1>
  <h3>Heading2</h3>
  <h1>some content2</h1>
  <h3>Heading3</h3>
  <h1>some content3</h1>
</div>

＆＃13;

Answer 3

$('div.class1 h3').each(function (){
            $(this).wrap('<a />');
        });

Answer 4

您可以使用.html()回调函数来实现此目的：

功能类型：函数（整数索引，htmlString oldhtml）=＆gt; htmlString 返回要设置的HTML内容的函数。接收集合中元素的索引位置和旧HTML值作为参数。 jQuery在调用函数之前清空元素;使用oldhtml参数引用以前的内容。在函数内，这指的是集合中的当前元素。

$('.class1 h3').html(function(i,oldhtml){
  return '<a href="#">'+ oldhtml +'</a>' ; 
});

将锚标记应用于类下的所有h3标记

4 个答案: