Question

我们如何隐藏特定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();

如果我想隐藏一个UL元素中的一个href元素，我应该如何更改这个javascript代码？并非所有href元素都具有类名“description”？

感谢您的帮助！

Answer 1

您可以使用attr href选择器：

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

以下是一个示例链接，您可以使用不同的方法：

这个问题也有关：jQuery cant access element with its attr href // simple tabs structure

Answer 2

您应该为每个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();

Answer 3

按标记名和类选择元素，然后过滤href值：

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

您还可以将结果限制为只有类.UL_tag内的元素：

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

Answer 4

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/

Answer 5

感谢您的回答，我认为所有这些答案都是正确答案，但我想要实现的目标有点不同。实际上有3个li元素（其中两个带有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秒后用户将转到下载页面。

所以可以只在一行中隐藏“描述”而不是在任何地方。我们称之为“开始”功能？

最大的问题是当所有UL和li都有相同的类名时，只隐藏一个li元素。

Answer 6

您可以遍历dom以获取父UI中的元素

$(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将无法工作，因为它获得了span元素。你需要使用.closest（） - 它获得最匹配的祖先

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

另外，不要将click事件绑定到另一个click事件中，因为这会导致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绑定任何锚点=每次点击第一个锚点时都会启动点击事件

使用委托

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

})

或jQuery 1.6及以下

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

});

使用javascript隐藏特定UL中的href元素

6 个答案: