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

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 代码？不是所有类名为“description”的 href 元素？

感谢您的帮助！

Answer 1

您可以使用 attr href 选择器：

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

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

• http://api.jquery.com/attribute-contains-selector/
• http://api.jquery.com/attribute-ends-with-selector/

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

Answer 2

可以遍历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();

也不要在另一个 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();
     });            

});

将任何锚点与 1234562 绑定=每次点击第一个锚点时开始一个点击事件

使用委托

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

})

或 jQuery 1.6 及以下版本

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

});

Answer 3

你应该给每个<ul>适当的ids：

<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 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

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

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

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

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

Answer 6

感谢您的回答，我认为所有这些答案也是正确的答案，但我想要达到的目标有点不同。实际上有 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 秒后用户将重定向到下载页面。

那么是否可以只在一行而不是到处隐藏“描述”。就在我们称之为“开始”函数的那一行？

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