How to take the current position of a div by his class?

Asked

Viewed 1,752 times

9

For example:

<div class="container">
  <div class="position"></div> <!-- Essa tinha que ser position [0]-->
  <div class="position"></div> <!-- Essa tinha que ser position [1]-->
  <div class="other"></div>
  <div class="position"></div> <!-- Essa tinha que ser position [2]-->
  <div class="position"></div> <!-- Essa tinha que ser position [3]-->
  <div class="other"></div>
  <div class="position"></div> <!-- Essa tinha que ser position [4]-->
  <div class="other"></div>
  <div class="other"></div>
</div>

This done preferably with Jquery.

It is possible?

javascript jquery html

3 answers

5


You can use it like this:

var divs = $('.container .position');
divs.each(function (i) {
    this.setAttribute('data-index', i);
});
divs.on('click', function () {
    console.log($(this).data('index'));
});

Example

In case you want to know which is the last div you can use thus

There is another variant:

var divs = $('.container .position');
divs.on('click', function () {
   var pos = (divs.get()).indexOf(this);
   // ou, à la Zuulvaretto:
   // var pos = Array.prototype.indexOf.call(divs, this);
    console.log(pos);
});

Example

  • Sergio, for example, can add a . css() through his index. So, I want to add a background where the index is 4.. type $(".position"). index(4). css("background", "red"), type manipulate by its index()

  • @Jeffersonalison, yes. You can use it like this: jsFiddle - $(".position").eq(4).css("background-color", "red");

  • @Jeffersonalison, and getting the two to interact: http://jsfiddle.net/u5m89/1/

  • 2

    A Refactoring à la Zuul for you: http://jsfiddle.net/LsD7k/1/

  • 1

    Hahaha :) I liked the " à la Zuul" @bfavaretto

  • 2

    Hahahaha, Zuulvaretto :)

  • 1

    Oops.. That’s right. It went right! Thank you!

Show 2 more comments

2

  • Got it! Thank you.

  • Okay, buddy.. and doing this by clicking? Example: http://jsfiddle.net/27Rg7/1/ Clicking on the first shows his position and so on. On arriving at the last print "I am the last". This example looks like this: by clicking on the first one it shows everyone, I wanted it to show only their position.

  • 1

    @Jeffersonalison I would do thus

0

You can use the function index() jQuery, working as follows, in your case I will exemplify with a click event:

$('.position').click(function(){
  alert($(this).index());
});

  • $(this).index() will give the index for all Ivs, including .other. Take a look at the 4a div here.

  • I was wondering, when will Sergio show up to tell you he’s wrong? hahaha, joke. (but I knew it was but I confess that I was lazy)

  • haha :) I got caught by chance, went out and was taking a look at the questions I had "lost"

  • because then, I was thinking about getting the index with the click but I couldn’t think of anything that worked right.

  • An alternative has now come to mind: ($('.position').get()).indexOf(this);

Browser other questions tagged javascript jquery html

You are not signed in. Login or sign up in order to post.