-2

I'm saving some elements into an array to later be able to determine which one of them I clicked on, but my method doesn't work. (later, I'm going to use the array index to calculate some things). The if statement below never becomes "true". What is wrong? Halp!

$(document).ready(function() {    
  var teamList = [];

  $('#team-list').children(".team-member").each(function() {       
    teamList.push($(this));
  });

  $('#team-list').on("click", ".team-member", function() {
    console.log("click");        
    for (i = 0; i < teamList.length; i++) { 
      console.log("The element was");
      console.log($(this));
      console.log("and the loop is on");
      console.log(teamList[i]);

      if ($(this) == teamList[i]) {
        console.log("it was true");
      }
    };    
  });    
});
NightOwl888
  • 55,572
  • 24
  • 139
  • 212
coding_pianist
  • 71
  • 2
  • 10
  • You cannot compare objects directly using JS. You'll need to compare some properties of the elements, such as their `id`. That said, your logic is quite redundant. What exactly are you trying to achieve – Rory McCrossan Feb 05 '18 at 17:14
  • Basically I will have a list of a lot of team members portraits that are given a column width with bootstrap, so they will arrange themselves into three per row on computer and two per row on smaller screens and one per row on mobile. (bootstrap "row" cannot be used for this reason). I will calculate which row and which position in each row an image has when you click on it using its array index. Then I will make a div containing some stuff appear under that row when the user clicks. – coding_pianist Feb 05 '18 at 17:17
  • For future reference, it's always better to ask about your goal than your attempted solution. With regard to what you're trying to do, calculating the position is fine, however you don't need to compare any objects in the array for this. Just use the `$(this)` reference within your `click` event handler, then use `offset()` to get the position of that element on the screen. – Rory McCrossan Feb 05 '18 at 17:21
  • Reading what you are trying to do, you are making this way harder for yourself than it needs to be. Try making a minimal example of the issue you are having with Bootstrap and ask for help on that. There are a few ways of achieving what you asked for in this question but they would mostly be solving the wrong issue. – Vanquished Wombat Feb 05 '18 at 17:25
  • I tested offset() to see how it works, but it returns a different number depending on the screen width. So for example the leftmost team member in a row of three has a different offset on a giant screen vs a small one (both are still large enough to hold three items in a row). How exactly would I use the offset coordinates to know if the item is the leftmost, middle, or rightmost item in the row? – coding_pianist Feb 05 '18 at 17:28
  • If you guys have an easy solution to my issue it is appreciated, because I've been searching all afternoon how to do this simple damn thing easily. – coding_pianist Feb 05 '18 at 17:29
  • @RoryMcCrossan or maybe even [`$(this).getBoundingClientRect()`](https://stackoverflow.com/questions/442404/retrieve-the-position-x-y-of-an-html-element) ? – Zze Feb 05 '18 at 21:11

1 Answers1

0

You need this.

if($(this).html() === $(teamList[i]).html())

Here is the working solution- https://jsfiddle.net/kyL8fcLz/

Ashish Balchandani
  • 1,228
  • 1
  • 8
  • 13