0

特定の UL 要素で href 要素を非表示にする方法 (UL 要素は同じ名前であるため、すべての UL 要素ではありません)。

たとえば、次のような HTML コードがあります。

<ul class="UL_tag">
  <li>Text 1</li>
  <li>Text 2</li> 
  <li><a href="http://www.google.com" class="description">Link to GOOGLE</a></li>
</ul>   

<ul class="UL_tag">
  <li>Text 1</li>
  <li>Text 2</li> 
  <li><a href="http://www.yahoo.com" class="description">Link to Yahoo</a></li>
</ul>

そして、次のコードを使用してこれらの href を非表示にできます。

$('a.description').hide();

1 つの UL 要素にある 1 つの href 要素だけを非表示にする場合、この JavaScript コードをどのように変更すればよいですか? クラス名が「description」のすべての href 要素ではありませんか?

ご協力ありがとうございました！

4

6 に答える 6

2

attr href セレクターを使用できます。

$('a[href="http://www.yahoo.com"]').hide();

さまざまな方法で使用できるリンクの例を次に示します。

そして、この質問も関連しています: jQuery cant access element with its attr href // simple tab structure

于 2012-08-27T07:19:08.897 に答える
0

タグ名とクラスで要素を選択し、href値でフィルタリングします。

$('a.description[href="http://www.google.com"]').hide();

結果をクラス内の要素のみに制限することもできます.UL_tag。

$('a.description[href="http://www.google.com"]', '.UL_tag').hide();
于 2012-08-27T07:32:41.127 に答える
0

HTML：

<ul class="UL_tag">
  <li>Text 1</li>
  <li>Text 2</li>
  <li><a href="http://www.google.com" class="description">Link to GOOGLE</a></li>
</ul>   

<ul class="UL_tag">
  <li>Text 1</li>
  <li>Text 2</li>
  <li><a href="http://www.yahoo.com" class="description">Link to Yahoo</a></li>
</ul>

Jquery：

 var d = $('.UL_tag li').children('a')[1]; // If you remove first href element  change it to value "1" to "0"
 $(d).hide();

このデモを参照してください：http： //jsfiddle.net/7aNRZ/8/

于 2012-08-27T07:33:44.500 に答える
0

回答ありがとうございます。これらの回答もすべて正解だと思いますが、私が達成しようとしていることは少し異なります。実際には 3 つの li 要素があります (そのうちの 2 つは href タグ付きです)。

 <ul class="UL_tag"> 
   <li>There you can download something.</li> 
   <li><a href="rapidshare.com/file.zip"; class="start">Download</a></li> 
   <li><a href="google.com"; class="description">Link to GOOGLE</a></li> 
</ul>

「ダウンロード」リンクをクリックすると、javascript が呼び出されます。

$(function(){
    var seconds = 10;
    var canClick = true;
    seconds *= 1000;

    $('a.start').bind('click', function(){
      if(canClick){
        var link = $(this).attr('href');
        var loader = $('input[name="link"]').val();

        $(this).html('<img src="' + loader + '"/>');
        setInterval(function(){
            window.location.reload();
            window.location = link; 
        }, seconds);
        // Description will be hidden everywhere.
        // How we can hide description in only one
        // row. In row where the a.start was called?
        $('a.description').hide();

        canClick = false;
        }
        return false;
    });
});

「gif の読み込み中」が表示され、10 秒後にユーザーはダウンロード ページにリダイレクトされます。

だから、「説明」をどこでもではなく1行だけで隠すことは可能ですか？この「開始」関数を呼び出す行でだけですか？

最大の問題は、すべての UL と li が同じクラス名を持つ場合に、1 つの li 要素だけを非表示にすることです。

于 2012-08-27T17:50:11.553 に答える
0

dom をトラバースして、親 ul 内の要素を取得できます

$(this).parent().siblings().find('a.description').hide();
// get current clicked > parent li > siblings > find a.description in li siblings > hide

http://jsfiddle.net/CjfXu/1/

編集

あなたのliは実際にはスパン内にもラップされているため..parentはスパン要素を取得しているため機能しません。.closest() を使用する必要があります-一致する最も近い祖先を取得します

$(this).closest('li').siblings().find('.description').hide();

また、クリック イベントを別のクリック イベント内にバインドしないでください。DOM が複数のイベント ハンドラーを要素にアタッチする原因となります。常に document.ready 関数内でバインドします。要素を動的に作成したり、バインドする必要のある要素が多数ある場合は、委任を使用するのが最も効率的な方法です。

あなたはこのようなコードを持っていました

$('a.start').bind('click', function(){ // <-- this should be $('a:not(.start)').bind 
     // code

     $('a.start').click(function(e) {            
         $(this).parent().siblings().find('.description').hide();
     });            

});

最初のアンカーがクリックされるたびにクリックイベントを開始する class=start でアンカーをバインドしています

委任を使用する

$('parentElement').on('click','element', function(){

})

またはjQuery 1.6以下

$('parentElement').delegate('element','click', function(){

});
于 2012-08-27T18:01:59.423 に答える
0

idそれぞれに適切な を与える必要があります<ul>:

<ul class="UL_tag" id="firstList">
  <li>Text 1</li>
  <li>Text 2</li> 
  <li><a href="http://www.google.com" class="description">Link to GOOGLE</a></li>
</ul>   

<ul class="UL_tag" id="secondList">
  <li>Text 1</li>
  <li>Text 2</li> 
  <li><a href="http://www.yahoo.com" class="description">Link to Yahoo</a></li>
</ul>

その後：

$('#firstList a.description').hide();
于 2012-08-27T07:18:57.157 に答える