各クラス内でhref属性を見つけるにはどうすればよいですか？

Question

私はアプリケーションを作成しようとしていますが、Webページを通過してhref属性を検索しますが、今のところhref属性を見つけてリンクの私に警告したいと思います。

私はjQueryのに新しいですが、私はフィドルを経由して、以下を実行しようとしましたが、私はそれが実行されているように見えることはできません。

$('soundTitle__tag sc-tag sc-tag-small').on("click", function() { 
 
     var self = $(this); 
 
     var link = self.find("a").attr('href'); 
 
     alert(link); 
 
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="link-redirect"> 
 
     <div class="soundTitle__tagContainer"> 
 
     <a class="soundTitle__tag sc-tag sc-tag-small" href="/home">1</a> 
 
     </div> 
 
     <div class="soundTitle__tagContainer"> 
 
     <a class="soundTitle__tag sc-tag sc-tag-small" href="/home">2</a> 
 
     </div> 
 
</div>

Answer 1

<div class="link-redirect"> 
    <div class="soundTitle__tagContainer"> 
    <a class="soundTitle__tag sc-tag sc-tag-small" href="/home"></a> 
    </div> 
    <div class="soundTitle__tagContainer"> 
    <a class="soundTitle__tag sc-tag sc-tag-small" href="/home"></a> 
    </div> 

あなたがクリックしたときsoundTitle__tagContainer最も近いアンカータグを見つけるでしょう

$('.soundTitle__tagContainer').on("click", function() { 
     var self = $(this); 
     var link = self.find("a").attr('href'); 
     alert(link); 
    }) 

このような

Answer 2

$('.soundTitle__tag.sc-tag.sc-tag-small')書き込みあなたのセレクタは、単にアンカーtag.Thisのデフォルトの動作をperventingのためにこれを使用するクラス

event.preventDefault();を持つ要素を選択するための.USE .className$('.soundTitle__tag')をwirte 3 class.Orとアンカータグであれば防ぐことができますURL

$('.soundTitle__tag.sc-tag.sc-tag-small').on("click", function(event) { 
 
     event.preventDefault(); 
 
     var self = $(this); 
 
     var link = self.attr('href'); 
 
     alert(link); 
 
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="link-redirect"> 
 
     <div class="soundTitle__tagContainer"> 
 
     <a class="soundTitle__tag sc-tag sc-tag-small" href="/home">Link-1</a> 
 
     </div> 
 
     <div class="soundTitle__tagContainer"> 
 
     <a class="soundTitle__tag sc-tag sc-tag-small" href="/home">Link-2</a> 
 
     </div> 
 
</div>

Answer 3

$(function(){ 
 
    $('.soundTitle__tag.sc-tag.sc-tag-small').on("click", function(e) { 
 
    e.preventDefault(); 
 
    var link = $(this).attr('href'); 
 
    alert(link); 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="link-redirect"> 
 
    <div class="soundTitle__tagContainer"> 
 
    <a class="soundTitle__tag sc-tag sc-tag-small" href="/home">link 1</a> 
 
    </div> 
 
    <div class="soundTitle__tagContainer"> 
 
    <a class="soundTitle__tag sc-tag sc-tag-small" href="/home">link 2</a> 
 
    </div>

次のリンクから一部の人が指摘したよう

、このは、クリックハンドラ内のリンクになるだろう。また、スクリプトとDOMの結合をより緊密にするため、このような詳細セレクタは必要ありませんが、デモ用にそのまま（クラスセレクタを追加して）残しました。

Answer 4

$('.link-redirect a').each(function() { 
    var $href = $(this).attr('href'); 
    if ($(this).is([href="/home"]) { 
    alert($href); 
    } 
}); 

これを確認してください:)それはあなたを助けることができます。

if文だけに変更動作しない場合は、次のいずれかであるなしに

$href 

、blablablaを持っています。もしうまくいけば答えを出す。