指定したdiv内のリンクにtarget = "_ blank"を追加するにはどうすればよいですか？

Question

のは、私は次のコードを持っているとしましょう。この場合

<div id="link_other"> 
    <ul> 
     <li><a href="http://www.google.com/">google</a></li> 
     <li> 
      <div class="some_class"> 
       dsalkfnm sladkfm 
       <a href="http://www.yahoo.com/">yahoo</a> 
      </div> 
     </li> 
    </ul> 
</div> 

は、JavaScriptがdivのlink_other内のすべてのリンクにtarget="_blank"を追加します。

JavaScriptを使用してどうすればいいですか？ jQueryのを使用して

Answer 1

/* here are two different ways to do this */ 
//using jquery: 
$(document).ready(function(){ 
    $('#link_other a').attr('target', '_blank'); 
}); 

// not using jquery 
window.onload = function(){ 
    var anchors = document.getElementById('link_other').getElementsByTagName('a'); 
    for (var i=0; i<anchors.length; i++){ 
    anchors[i].setAttribute('target', '_blank'); 
    } 
} 
// jquery is prettier. :-) 

あなたはまた、あなたがそれらを警告するために、これをやっているユーザーに通知するためにタイトルタグを追加することができますユーザーは期待しないで何を：

$('#link_other a').attr('target', '_blank').attr('title','This link will open in a new window.'); 

Answer 2

：

$('#link_other a').each(function(){ 
    $(this).attr('target', '_BLANK'); 
}); 

Answer 3

非jqueryの：

// Very old browsers 
// var linkList = document.getElementById('link_other').getElementsByTagName('a'); 

// New browsers (IE8+) 
var linkList = document.querySelectorAll('#link_other a'); 

for(var i in linkList){ 
linkList[i].setAttribute('target', '_blank'); 
} 

Answer 4

これを実行すると、Web開発者とユーザビリティの専門家によって一般的に悪い習慣と考えられていることに注意してください。通常ははるかにそれように痛い経験をすることができ、ユーザーから離れて、「戻る」ボタンを撮る -

避け、すべての可能な場合は、複数のブラウザウィンドウを産卵：ヤコブ・ニールセンが、これは経験閲覧ユーザーのコントロールの削除について言っていますあなたが提供しようとしている何らかの利益を上回ります。第2のウィンドウを作成することに賛成する一般的な理論の1つは、ユーザーがサイトを離れないようにすることですが、皮肉なことに、逆の効果を望むときに戻らないようにすることがあります。

これは、XHTML 1.1仕様からW3Cによって削除されるターゲット属性の根拠だと思います。

このアプローチをとって死んでしまった場合、Pim Jagerの解決策は良いです。

ユーザーフレンドリーなアイデアは、すべての外部リンクにグラフィックを追加して、リンクをたどって外部に移動することをユーザーに示すことです。

あなたはjQueryを使ってこれを行うことができます：指摘されているとして、それはだから

$('a[href^="http://"]').each(function() { 
    $('<img width="10px" height="10px" src="/images/skin/external.png" alt="External Link" />').appendTo(this) 

}); 

Answer 5

インライン：

$('#link_other').find('a').attr('target','_blank'); 

Answer 6

すべての外部リンクの

使用この

$('a[href^="http://"], a[href^="https://"]').attr('target', '_blank'); 

Answer 7

私はすべての外部リンクのためにこれを使用します。

window.onload = function(){ 
    var anchors = document.getElementsByTagName('a'); 
    for (var i=0; i<anchors.length; i++){ 
    if (anchors[i].hostname != window.location.hostname) { 
     anchors[i].setAttribute('target', '_blank'); 
    } 
    } 
}