CODEWITHSUNDEEP
javascriptjqueryhtmlajax
alilland
alilland

Reputation: 2572

how do i capture which number <div> got clicked on inside my container <div> and store it in a variable

edit: my code is all held inside a $(document).ready(function() {} because of this, and because my html code is generated inside my javascript file on the fly, i am experiencing issues using .click() when applying the answer that was given to use 

$('.movies_cell').click(function(){
    var tmp = $(this).index();
});

original: i have 20 div elements on a page with a class of .movies_cell that are all generated from an ajax file. All of the div's are created within container div called #movies.

any of the .movies_cell div's can be clicked to bring up a modal box, because i am going to place information from my json file in that modal depending on what gets clicked i need to know which div got clicked, for instance, if it was the 5th div i want to know that the 5th div was clicked and then store that number in a variable, if it was the 2nd, or 3rd i want that number to be stored in a variable and then clear when another .movies_cell div gets clicked.

how would i write a javascript or jquery script to accomplish this? :(

thanks!

  $('#myMovies').click(function () {
      $.getJSON('data/movies.json', function (allData) {
          $.each(allData, function (i, field) {
              $('#movies').append(function () {
                  var movies = '<div class="movies_cell">';
                  movies += '<div class="movies_image">';
                  movies += '<a href="#openModal"><img src="img/movies/' + (field.image) + '" alt="' + (field.name) + ' Poster" style="width: 100%; height: 100%"></a>';
                  movies += '</div>';
                  movies += '<div class="movies_detail">';
                  movies += '<a href="#openModal"><h1>' + (field.name) + '</h1></a>';
                  movies += '<img src="img/rating/' + (field.myRating) + '.png" alt="movie rating" style="margin: auto;">';
                  movies += '</div>';
                  movies += '</div>';
                  counter++;
                  console.log(counter);
                  return movies;
              });
          });
      });
  });

Upvotes: 1

Views: 72

Answers (2)

chiliNUT
chiliNUT

Reputation: 19573

Use event delegation.(https://api.jquery.com/on#direct-and-delegated-events) At the top

 $('#movies').on( "click", ".movies_cell > div", function() {
   var tmp = $(".movies_cell > div").index(this);
   console.log(tmp);
});

then

 $('#myMovies').click(function () {
//rest of code

Upvotes: 1

cssyphus
cssyphus

Reputation: 40076

Can you use .index() ? It is a zero-based index of the collection of items with, for example, class="movies_cell"

$('.movies_cell').click(function(){
    var tmp = $(this).index();
});

jsFiddle Demo

Upvotes: 1

Related Questions