Get div location number using jquery

Question

I have the following slider code in html;

<div class="carousel-inner" style="position: relative;">

<div class="item">
    <img src="forsidebanner_gf39.jpg" alt="">
    <a class="overlay" style="position: absolute; top: 0%; left: 0%; width: 101.4%; height: 103.31491712707%;" href="domain.com" title="">
    </a>
</div>
<div class="item active">
    <img src="forsidebanner_50fifty_somvistpaafarmen.jpg" alt="">
    <a class="overlay" style="position: absolute; top: 0%; left: 0%; width: 100.8%; height: 102.76243093923%;" href="domain.com/one.html" title="">
    </a>
</div>

What I want to achieve is the console to register the div number of the class “item”, for example, if you click on image 1 of the parent class “item”, it will print 1, and if you click on the second image, it will print 2.

I tried this code, but its print is only 1

$(".item").click(function(){
var numitem = $(this).length;
    console.log(numitem);

});

This is a demo link -> https://jsfiddle.net/en44voeq/ Any help would be greatly appreciated.

thanks

Answer 1

. - , . , html jquery, .

, URL-. URL

window.location.href = $(this).find(".overlay").attr("href");

, , , .

jquery ,

: https://jsfiddle.net/eugensunic/ru44voeq/3/

$(".overlay").hide();
$(".item").click(function(){

    var numitem = $(this).index()+1;
    $(".overlay").show();
    window.location.href = $(this).find(".overlay").attr("href");
    alert(numitem);

});

Answer 2

index(), style of overlays @GrafiCode Studio, , style , .

, img img , , . .

//Restructuring the HTML code on ready 
$(".carousel-inner").find('.item').each(function(){
  //make a copy of img
  var img = $(this).find('img').clone(true);

  //remove image
  $(this).find('img').remove();

  //append copy to the link
  $(this).find('a').removeAttr('style').html(img);    
});

//Handle the click event
$(".item").click(function(){
    var numitem = $(this).index()+1;
    alert(numitem);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="carousel-inner" style="position: relative;">

    <div class="item">
        <img src="http://web.ccpgamescdn.com/newssystem/media/67432/1/100_-Twitter.jpg" alt="">
            <a class="overlay" style="position: absolute; top: 0%; left: 0%; width: 101.4%; height: 103.31491712707%;" href="domain.com" title="">
            </a>
            </div>
        <div class="item active">
            <img src="http://www.elcomcms.com/Images/UserUploadedImages/664/facebookicon_100x100.jpg" alt="">


                <a class="overlay" style="position: absolute; top: 0%; left: 0%; width: 100.8%; height: 102.76243093923%;" href="domain.com/one.html" title="">
                </a>
                </div>

        </div>

Hide result

, .

Answer 3

inArray, . .

$(".item").click(function(){

    console.log($.inArray(this,$(".item")));

});

, click. inArray , .

Answer 4

.

, ( this) - , node.

jQuery node $(this), jQuery, node. length 1.

.item, - :

var items = $('.item')
items.click(function (){
    .....
    items.length //number of items
    $(this).index() //index of the node in its parent, not relative to the `.items`
    var itemIndex = $.inArray(this, items) //as suggested by @Franklin Satler
})

docs say:

Find the given value in the array and return its index (or -1 if not found).