2016-04-14 13 views
0

ich diese HTML-Struktur haben:jQuery .closest fehlgeschlagen Eltern Eingabewert finden

<input type="text" name="quantity" class="form-control quantity" value="1" min="1" max="10" maxlength="2" size="2"> 

<span class="input-group-btn"> 
    <button type="button" class="btn btn-default btn-number btn-plus p-l-10 p-r-10"> 
     <span class="glyphicon glyphicon-plus"></span> 
    </button> 
</span> 

und ich habe auch dieses jquery Skript:

<script> 
    $(document).ready(function(){ 
     $(document).on("click", ".btn-plus", function() { 
      event.preventDefault(); 
      var quantity = $(this).closest(".quantity").val(); 
      alert (quantity); 
     }); 
    }); 
</script> 

theoretisch kann ich Wert von Eingabetext erhalten einmal Die btn-plus ist angeklickt, aber ich bekomme immer noch undefined Wert als Ergebnis.

Wie erhält man den Eingangswert .quantity mit .closest? danke

+0

'.quantity' ist kein Elternteil von' .btn-plus'. Sie finden den 'body' mit' nest() ', danach ... finden Sie' 'quantity' mit' find() '. '.quantity' ist ein Freund der Eltern: D, nur zum Spaß. – Vuong

+0

Die beste Lösung besteht darin, das nächstliegende übergeordnete Element als übergeordnetes Element des Bereichs abzurufen und ein untergeordnetes Eingabefeld auszuwählen und auszuwählen oder eine Eingabe als Geschwister des Bereichs zu erhalten. Sie haben so viele Lösungen, aber die Eingabe ist keine Vorbedingung für das Span-Tag. – Loenix

Antwort

1

.closest() verwendet wird, ist ein passender Vorfahr Element zu finden, die in Ihrem Fall das input Element ist die vorherigen Geschwister der button Mutter

$(document).ready(function() { 
 
    $(document).on("click", ".btn-plus", function(event) { 
 
    event.preventDefault(); 
 
    var quantity = $(this).parent().prev(".quantity").val(); 
 
    alert(quantity); 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" name="quantity" class="form-control quantity" value="1" min="1" max="10" maxlength="2" size="2"> 
 

 
<span class="input-group-btn"> 
 
    <button type="button" class="btn btn-default btn-number btn-plus p-l-10 p-r-10"> 
 
     <span class="glyphicon glyphicon-plus"></span> 
 
</button> 
 
</span>

1

$(document).ready(function() { 
 
    $(document).on("click", ".btn-plus", function(event) { 
 
    event.preventDefault(); 
 
    var quantity = $(this).closest("span").prev().val();//use closest span and prev to get input 
 
    alert(quantity); 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" name="quantity" class="form-control quantity" value="1" min="1" max="10" maxlength="2" size="2"> 
 

 
<span class="input-group-btn"> 
 
    <button type="button" class="btn btn-default btn-number btn-plus p-l-10 p-r-10"> 
 
     <span class="glyphicon glyphicon-plus">asdasdasdas</span> 
 
</button> 
 
</span>

Verwenden .closest() die übergeordnete Spanne erhalten Spanne. Da Eingang Einsatz vor Spanne ist .prev()

0

Nach auf der JQuery-Website scheint es, als ob die nächste Funktion ähnlich wie die Eltern funktioniert, indem sie nur die Vorfahren des Elements, auf das Sie abzielen, betrachtet.

https://api.jquery.com/closest/#entry-longdesc

Als Input-Tag ist nicht ein Elternteil der Schaltfläche Tag dann die nächste Funktion wird es nicht finden.

Verwenden Sie eine Kombination aus Eltern und Geschwistern oder ähnlichem, um das Eingabe-Tag zu targetieren.