I recently made a jquery code that should hides an element if it's href is equal to another element's but i can't be able to make it work...

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
}

I recently made a jquery code that should hides an element if it's href is equal to another element's but i can't be able to make it work...

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
}

• javascript
• jquery
• html
• css

• 1 you should probably loop to pare to all. – guradio Commented Oct 26, 2016 at 8:35
• I don't really understand what do you expect – Alexis Commented Oct 26, 2016 at 8:42
• Do you mean hide anchor contain duplicate href? – Mohammad Commented Oct 26, 2016 at 8:43
• @Alexis i expect the div with <class="thumb"> and <href="1">(same as the first div) will hide because it has the same href value – Marwane Commented Oct 26, 2016 at 8:44
• @MarwaneBettach So only the others should be hide ? and the first should be show ? – Alexis Commented Oct 26, 2016 at 8:45

7 Answers 7

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

You can try like this, only check for thumb class then it will hide specific div which contain same href

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

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

Just select by that href (and parent not containing the base div's class 'a') and hide it

$('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./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>

Try something like this with Jquery.

Loop on each a and store the href. Select all <a> but first with same href and hide the parent

$("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./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>

You should loop through all elements.

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

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

Here's a trick, using the 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 />');
})

The reason that I use reverse is that I want the first a tag to remain showing. If you want the last a tag to remain, you can just use $('a') instead of $($("a").toArray().reverse())

css:

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

With this trick, you can make all the a tag with a unique href. Hope it can help you.