如果 href 等于某个值，使用 jQuery 隐藏元素

Question

最近我编写了一个jQuery代码，应该在一个元素的href等于另一个元素的href时隐藏该元素，但我无法使其工作...

jsfiddle

HTML

<div class="a">
    <a href="1">
        <img scr="a">
    </a>
</div>

<div class="thumb">
    <a href="1">
        <img scr="a">
    </a>
</div>

<div class="thumb b">
    <a href="2">
        <img scr="b">
    </a>
</div>

CSS

.a{width:400px;height:100px;background-color:black;}
.thumb{width:400px;height:100px;background-color:green;}
.b{background-color:yellow;}

JQUERY

var mainhref = $(".a a").attr('href');

if($("a", this).attr('href') == mainhref ) {
    $(".a").hide();
}
else {
    $(".a").show
}

- Marwane

---

你应该循环比较所有的元素。 - guradio

我不太明白你的期望是什么。 - Alexis

你的意思是隐藏包含重复 href 的锚点吗？ - Mohammad

@Alexis 我预计具有 <class="thumb"> 和 <href="1">（与第一个 div 相同）的 div 将被隐藏，因为它具有相同的 href 值。 - Marwane

@Alexis 不对，如果你看最后一个 div，href 值不是 1，所以它应该保持可见，只有第二个 div 应该隐藏，因为它与第一个 div 具有相同的 href 值。 - Marwane

Answer 1

使用纯JavaScript :D

let ar = document.getElementsByTagName('a'),
    holdarray = [];

Array.from(ar, elem => {
  if(holdarray.includes(elem.getAttribute('href')))
    elem.parentNode.style.display = 'none'
  else
    holdarray.push(elem.getAttribute('href'))
})

.a { width:400px;height:100px;background-color:black; }
.thumb { width:400px;height:100px;background-color:green; }
.b { background-color:yellow; }

<div class="a" >
  <a href="1"></a>
</div>

<div class="thumb">
  <a href="1"></a>
</div>

<div class="thumb b">
  <a href="2"></a>
</div>

- hdotluna

---

由于您正在使用ES6，您甚至可以尝试使用Array.from。 - Rajesh

@Rajesh，它正在工作。我只是按照mdn给出的文档进行操作。我应该更多地使用它。:D ES5和ES6太强大了 :) - hdotluna

如果例如只想隐藏a标签，该怎么做？ - Marwane

@MarwaneBettach 只需删除 (.parentNode)。 - hdotluna

@Rajesh 感谢你的时间。我得走了。我要练习我的 Angular2 演讲。我是个勤奋的学生，哈哈。从你那里学到了很多，只用了5分钟。 - hdotluna

Answer 2

只需按照href进行选择（并且父元素不包含基本div类'a'），然后将其隐藏。

$('a[href="'+mainhref+'"]').parent(":not(.a)").hide();

var mainhref = $(".a a").attr('href');
var parentDiv = $('a[href="'+mainhref+'"]').parent(":not(.a)").hide();

.a{width:400px;height:100px;background-color:black;}
.thumb{width:400px;height:100px;background-color:green;}
.b{background-color:yellow;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a" >
<a href="1">
<img scr="a">
</a>
</div>

<div class="thumb">
<a href="1">
<img scr="a">
</a>
</div>

<div class="thumb b">
<a href="2">
<img scr="b">
</a>
</div>

- Theodore K.

---

代码隐藏了所有带有href的元素，但我认为问题想要隐藏重复的href。 - Mohammad

如@Mohammad所说，yush - Marwane

谢谢大家，问题已解决！这是预期的结果吗？ - Theodore K.

Answer 3

你可以尝试这样做，只检查缩略图类别，然后它将隐藏包含相同 href 的特定 div。

var mainhref = $(".a a").attr('href');

$('.thumb a').each(function(){
  if($(this).attr('href') == mainhref)
  {
     $(this).parents('.thumb').hide();
  }
});

- Bharat

Answer 4

尝试使用Jquery做类似以下的事情。

循环每个并存储href。选择所有带有相同href的但第一个，并隐藏其父元素。

$("a").each(function(){
  var href= $(this).attr("href");
  $("a[href='"+href+"']").not(":first").parent().hide();
 });

.a{width:400px;height:100px;background-color:black;}
.thumb{width:400px;height:100px;background-color:green;}
.b{background-color:yellow;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">
    <a href="1">
        <img scr="a">
    </a>
</div>

<div class="thumb">
    <a href="1">
        <img scr="a">
    </a>
</div>

<div class="thumb b">
    <a href="2">
        <img scr="b">
    </a>
</div>

- Alexis

Answer 5

你应该循环遍历所有元素。

$('a').each(function(){
  if($(this).attr('href') == mainhref){
    $(this).hide();
  }
});

- Abdullah A Malik

---

这几乎是我所需要的... 这会隐藏<a>，我需要它隐藏它上面的div，我尝试通过将"this"更改为".thumb"来实现，但它会隐藏所有具有该类的div。 - Marwane

Answer 6

$('a').each(function(){
  if($(this).attr('href') == mainhref){
    $(this).hide();
  }
});

- Kushal Jain

Answer 7

这里有一个技巧，使用radio:checked。

$($("a").toArray().reverse()).each(function(index, el){
  var href = $(el).attr('href');
  $(el).parent().before('<input type="radio" name="' + href + '" class="hidden" checked />');
})

我使用reverse的原因是为了让第一个a标签保持显示。如果你想要最后一个a标签保持显示，你可以直接使用$('a')代替$($("a").toArray().reverse())。

css：

.hidden { display:none };
input[type=radio]+ div a { display: none };
input[type=radio]:checked + div a { display: block };

通过这个技巧，你可以使所有的标签都带有一个唯一的href属性。希望它能帮到你。

- Gabriel Cheung