如果href等于,则jquery hide元素

时间:2016-10-26 08:33:58

标签: javascript jquery html css

我最近创建了一个jquery代码,如果它的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
}

7 个答案:

答案 0 :(得分:4)

使用普通的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>

答案 1 :(得分: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>

答案 2 :(得分:2)

您可以尝试这样做,只检查拇指类,然后它会隐藏包含相同href的特定div

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

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

答案 3 :(得分:1)

使用Jquery尝试这样的事情。

在每个a上循环并存储href。选择所有<a>但首先选择相同的href并隐藏父

&#13;
&#13;
$("a").each(function(){
  var href= $(this).attr("href");
  $("a[href='"+href+"']").not(":first").parent().hide();
 });
&#13;
.a{width:400px;height:100px;background-color:black;}
.thumb{width:400px;height:100px;background-color:green;}
.b{background-color:yellow;}
&#13;
<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>
&#13;
&#13;
&#13;

答案 4 :(得分:0)

你应该遍历所有元素。

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

答案 5 :(得分:0)

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

答案 6 :(得分:0)

这是一个技巧,使用收音机:选中。

$($("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 };

通过此技巧,您可以使用唯一a制作所有href标记。希望它可以帮到你。