Jquery preend на основе собственного контента

Question

Мне нужно что-то в jQuery, но не могу понять это.

Я получил этот HTML:

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

В JQuery Я хочу, чтобы получить содержание этого `h2' и нужно, что для:

<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 аргументов см Рори 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

Итак, возьмите содержание Н2, а затем добавить А с HREF и текст в качестве захваченного контента.

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

Answer 4

Попробуйте это ..

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

Answer 5

$(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