[jQuery]テキストにハイパーリンク（hyperlink）を適用する

jQueryを使用して、テキストにハイパーリンク（hyperlink）を適用する例です。

jQueryを使用して、テキストにハイパーリンク（hyperlink）を適用する

jQueryを使って、テキストにハイパーリンク（hyperlink）を適用するには、 wrap（） メソッドを使用します。 たとえば、次のようなスクリプトの場合：

$("button").click(function(){
$("p").wrap("<div></div>");
});
// Source: w3schools

各 要素の部分を 要素で囲ま安くなります。

これを応用して、特定の要素内のテキストへのリンクを適用することができます。 例えば、次のようなようなHTMLコードがある場合：

<ul>
<li class="menu1">메뉴 1</li>
<li class="menu2">메뉴 2</li>
</ul>

次のjQueryのスクリプトを適用してみると：

$('.menu1').contents().wrap('<a href="#" class="menu1_link"></a>');

デモ：

最初の 内のハイパーリンクが追加されていることを知ることができます。 上記の方法の代わりに wrapInner（） メソッドを使用しても同じ結果を得ることができます。 （wrapInner（）詳細については、 ここを参照してください。）

$('.menu1').wrapInner('<a href="#" class="menu1_link"></a>');
// 참고

デモ：

このように wrap（） メソッドを使用して、簡単に目的のタグを囲むことができます。

もう少し複雑な例を考えて試みますか？ 要素のリンクを他の要素にコピーする方法を説明します。 例えば、次のようなHTMLコードで：

<div class="alpha">
<a href="http://www.abc.com">텍스트1</a>
</div>

<div class="beta">
텍스트 2
</div>

テキスト1に適用されたハイパーリンクをコピーして、 ベータ 要素内のテキストに適用するには、

// 링크를 복제하고 텍스트를 삭제함
$link = $('.alpha').find('a').clone().text('');
// 모든 .beta의 컨텐츠에 복제한 링크로 둘러싸도록 합니다.
$('.beta').contents().wrap($link);

デモ：

その後、本来は何のリンクがなかった テキスト2テキスト1に適用されていたハイパーリンクをコピーします。

別の方法として、もう少し複雑にすると、：

var href = $('.alpha').find('a').attr('href'); // a 태그의 href 가져오기
var text = $('.beta').text(); //beta 요소 내의 텍스트 가져오기
var betaHTML = "<a href='" + href + "'>" + text + "</a>"; // 하이퍼링크 생성
$('.beta').html(betaHTML); // beta 요소 更新
// 참고

デモ：

stackoverflowの この記事も参考にしてください。 attr（） メソッドの詳細については、 ここで参考します。

参考までにPHPコードなどの各種コードスクリプトを販売する CodeCanyonで低コストにはJavaScript / jQueryテンプレートなどを購入することができます。

メモ：

• jQueryを使用してテキストを変更する方法