Michał Xone Michał Xone - 2 months ago 6
HTML Question

Searching for the same div

I need to compare which

div
in an orderd list is the one clicked.
Because I then need to show another
div
which has the index in a different list.

Everything's properly written, but the comparison is failing (
if (ten == $(this))
). (Now is chenged for: if (ten.is(this)) {. Works fine)



$(document).ready(function() {
$(".divs2 .os").each(function(e) {
if (e != 0)
$(this).hide();
});
var wybrany;
$(".bt-o").click(function() {
var ten = $(this);
$(".divs .bt-o").each(function(e) {
if (ten.is(this)) {
$(this).css('background-image', 'url(themes/o2.png)');
wybrany = e;
} else {
$(this).css('background-image', 'url(themes/o1.png)');
}
});
$(".divs2 .os").each(function(e) {
if (e == wybrany)
$(this).show();
});
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="linia">
<a id="prev"></a>
<div class="divs">
<div class="bt"><a class="bt-o">2007</a><a class="bt-o">2008</a><a class="bt-o">2009</a><a class="bt-o">2010</a><a class="bt-o">2011</a><a class="bt-o">2012</a><a class="bt-o">2016</a></div>
<div class="bt"><a class="bt-o">2000</a><a class="bt-o">2001</a></div>
</div>
<a id="next"></a>
</div>
<div class="divs2">
<div class="os"><div class="rok">2007</div>sample</div>
<div class="os"><div class="rok">2008</div>sample</div>
<div class="os"><div class="rok">2009</div>sample</div>
<div class="os"><div class="rok">2010</div>sample</div>
<div class="os"><div class="rok">2011</div>sample</div>
<div class="os"><div class="rok">2012</div>sample</div>
<div class="os"><div class="rok">2016</div>sample</div>
<div class="os"><div class="rok">2000</div>sample</div>
<div class="os"><div class="rok">2001</div>sample</div>
</div>




Answer

Use .is() instead of == to test the equality of two elements.

If you simply try to compare ten to a newly-constructed jQuery object around this, the comparison will fail -- they are distinct objects, created at different times.

is() does a logical comparison of two objects -- do they represent the same DOM element? That's why you don't need to wrap this in $() before comparing.

$(document).ready(function() {
  $(".divs2 .os").each(function(e) {
    if (e != 0)
      $(this).hide();
  });
  var wybrany;
  $(".bt-o").click(function() {

    var ten = $(this);
    $(".divs .bt-o").each(function(e) {

      // test for DOM equality with is()
      //
      if (ten.is(this)) {     
        $(this).css('background-color', 'red');
        wybrany = e;
      } else {
        $(this).css('background-color', 'transparent');
      }
    });
    $(".divs2 .os").each(function(e) {
      if (e == wybrany)
        $(this).show();
    });
  });
});
.bt-o {
  margin: .25em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="linia">
<a id="prev"></a>
<div class="divs">
    <div class="bt"><a class="bt-o">2007</a><a class="bt-o">2008</a><a class="bt-o">2009</a><a class="bt-o">2010</a><a class="bt-o">2011</a><a class="bt-o">2012</a><a class="bt-o">2016</a></div>
    <div class="bt"><a class="bt-o">2000</a><a class="bt-o">2001</a></div>
</div>
<a id="next"></a>
</div>
<div class="divs2">
	<div class="os"><div class="rok">2007</div>sample</div>
	<div class="os"><div class="rok">2008</div>sample</div>
	<div class="os"><div class="rok">2009</div>sample</div>
	<div class="os"><div class="rok">2010</div>sample</div>
	<div class="os"><div class="rok">2011</div>sample</div>
	<div class="os"><div class="rok">2012</div>sample</div>
	<div class="os"><div class="rok">2016</div>sample</div>
	<div class="os"><div class="rok">2000</div>sample</div>
	<div class="os"><div class="rok">2001</div>sample</div>
</div>

Comments