ベストセラー人気 WordPress テーマTop 30 詳細

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

Last Updated:2020年11月15日| コメントを残す
  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

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>');
// 데모: jsfiddle

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

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

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

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

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

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

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

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

その後、本来は何のリンクがなかった テキスト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 요소 更新
// 데모: jsfiddle / 참고

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

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

コードキャニオンで販売されているjavascript / jQueryテンプレート
CodeCanyonで販売されているjavascript / jQueryテンプレート

メモ:



コメントを残す

コメント