jQuery Anzahl aktuelle div Position von vielen anderen

Question

1. Teil < < Gelöst mit $ (this) .index();

Lassen Sie uns sagen, dass ich die unten div Struktur haben, wenn die Mutter div id oder Klasse nicht:

<div> 
    <div class="myClass"></div> 
    <div class="myClass"></div> 
    <div class="myClass"></div> 
    <div class="myClass"></div> 
    <div class="myClass"></div> 
    <div class="myClass"></div> 
</div> 

Wie kann ich eine Benachrichtigung mit jQuery mit der aktuellen div Position auf Maus schweben bekommen? Beispiel: Ich möchte "THIS IS DIV NUMBER 3" erhalten, wenn ich mit der Maus auf das dritte .myClass div lege.

2. Teil Und was ist, wenn ich die folgende Struktur erhalten, wobei $ (this) .index() Null egal immer zurückkehrt, welches ich schweben?

<div> 
    <div class="myClass"></div> 
</div> 
<div> 
    <div class="myClass"></div> 
</div> 
<div> 
    <div class="myClass"></div> 
</div> 
<div> 
    <div class="myClass"></div> 
</div> 
<div> 
    <div class="myClass"></div> 
</div> 

Answer 1

Sie können die index() Methode auf mouseenter() verwenden:

$('div.myClass').mouseenter(function() { 
 
    var idx = $(this).index() + 1; 
 
    $('#output').text('THIS IS DIV NUMBER ' + idx); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <div class="myClass">div1</div> 
 
    <div class="myClass">div2</div> 
 
    <div class="myClass">div3</div> 
 
    <div class="myClass">div4</div> 
 
    <div class="myClass">div5</div> 
 
    <div class="myClass">div6</div> 
 
</div> 
 

 
<div id="output"></div>

Für Ihr zweites Beispiel müssen Sie einen Selektor index() zu schaffen, wie die Elemente nicht alle Geschwister sind:

$('div.myClass').mouseenter(function() { 
 
    var idx = $(this).index('.myClass') + 1; 
 
    $('#output').text('THIS IS DIV NUMBER ' + idx); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <div class="myClass">div1</div> 
 
</div> 
 
<div> 
 
    <div class="myClass">div2</div> 
 
</div> 
 
<div> 
 
    <div class="myClass">div3</div> 
 
</div> 
 
<div> 
 
    <div class="myClass">div4</div> 
 
</div> 
 
<div> 
 
    <div class="myClass">div5</div> 
 
</div> 
 

 
<div id="output"></div>

Answer 2

$('.myClass').mouseenter(function() { 
 

 
    alert("This is din number " + ($(this).index()+1)) 
 

 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <div class="myClass">1</div> 
 
    <div class="myClass">2</div> 
 
    <div class="myClass">3</div> 
 
    <div class="myClass">4</div> 
 
    <div class="myClass">5</div> 
 
    <div class="myClass">6</div> 
 
</div>

Verwenden .index()

Answer 3

Sie index() Funktion verwenden können:

$(document).on('mouseenter', '.myClass', function() { 
 
    alert($(this).index() + 1); 
 
});

.myClass { 
 
    padding:15px; 
 
    border:1px solid #d8d8d8; 
 
    margin:5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div> 
 
    <div class="myClass">1</div> 
 
    <div class="myClass">2</div> 
 
    <div class="myClass">3</div> 
 
    <div class="myClass">4</div> 
 
    <div class="myClass">5</div> 
 
    <div class="myClass">6</div> 
 
</div>