Question

我在jQuery中需要一些东西，但无法弄清楚。

我得到了这个HTML：

 <h2>My Name 1</h2>
 <h2>My Name 2</h2>
 // many more

在jQuery中我想得到这个'h2＆＃39;的内容。并需要：

 <h2><a href="My Name 1">My Name 1</a></h2>

这是有效的：

 jQuery(".content h2").prepend("<a href=''>").append("</a>");

但是href必须基于其内容......如何做到这一点？

谢谢！

Answer 1

您无法附加一大块HTML元素，例如a标记的一半。浏览器修复了这样一个无效的HTML并且无法渲染它。

使用wrapInner方法：

$('.content h2').wrapInner('<a href="something"></a>');

如果链接href属性以某种方式取决于实际的h2内容，那么您应该将函数用作wrapInner个参数，请参阅Rory McCrossan的answer。例如，要将href设置为与h2内容相同，可以是：

$('h2').wrapInner(function() {
    return '<a href="' + $(this).text() + '"></a>';
});

Answer 2

我不确定你所拥有的是否正如你所期望的那样，因为你只能附加整个元素。您当前的代码最终将会出现以下内容：

<h2>
    <a href=''></a>
    My name 1
    <a></a>
</h2>

鉴于您希望有效地将h2的文本包装在a元素中，您可以将wrapInner()与包含设置href的逻辑的处理函数一起使用。试试这个：

jQuery(".content h2").wrapInner(function() {
    var href = 'foo.php'; // your logic here
    return '<a href="' + href + '"></a>';
});

Example fiddle

Answer 3

$(function () {
$(".content h2").each(function (n) {
var x =$('h2').eq(n).text();
var y = x.replace(/\s/g, '');
$(".content h2").eq(n).empty().append("<a href="+y+">"+x+"</a>");
})
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="content">
 <h2>My Names 1</h2>
 <h2>My Names 2</h2>
 <h2>My Names 3</h2>
 <h2>My Names 4</h2>
 <h2>My Names 5</h2>
</div>

Blockquote

Answer 4

因此，抓取H2的内容，然后使用href和text附加A作为抓取的内容。

var h2Text = $(".content h2").text();
$(".content h2").empty().append( $("<a/>", { href: h2Text, text: h2Text }));

Answer 5

试试这个..

$(document).ready(function(){
    var href = 'test.html'; 
jQuery(".content h2").prepend("<a href='"+href+"'>").append("</a>");
});

Jquery基于自己的内容预先添加

5 个答案: