Versuchen, vorherige DOM-Elemente zu finden und Eingabewert zu erhalten jquery

Question

Ich versuche, eine Tabelle zu erstellen, die, wenn ein Benutzer auf Update klickt, den ersten und zweiten Eingabewert erhält. Ich versuche, prev zu verwenden, um die ersten beiden DOM-Elemente zu finden und den Wert zu erhalten, aber scheitern, was soll ich tun? Jede Hilfe wird geschätzt.

$('.update_button').on("click",function(){ 
 
\t var update_val_1 = $(this).prev().find('input:first').val(); 
 
\t var update_val_2 = $(this).prev().find('input:nth-child(2)').val(); 
 

 
\t alert(update_val_1); 
 
\t alert(update_val_2); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<tr class="gridtable"> 
 
    <td><input type="text" value="apple" /></td> 
 
    <td><input type="text" value="one" /></td> 
 
    <td><button type="button" class="update_button">UPDATE</button></td> 
 
</tr> 
 
<tr class="gridtable"> 
 
    <td><input type="text" value="banana" /></td> 
 
    <td><input type="text" value="three" /></td> 
 
    <td><button type="button" class="update_button">UPDATE</button></td> 
 
</tr> 
 
<tr class="gridtable"> 
 
    <td><input type="text" value="berry" /></td> 
 
    <td><input type="text" value="ten" /></td> 
 
    <td><button type="button" class="update_button">UPDATE</button></td> 
 
</tr>

Answer 1

Das Problem ist, dass prev Knoten für Geschwister sieht. Ihre input Elemente sind in verschiedenen td 's, so dass sie keine Geschwister sind. Stattdessen müssen Sie in die übergeordnete Zeile gehen und dann die input von dort abrufen.

Explicit Beispiel:

$('.update_button').on("click", function() { 
 
    var $parentRow = $(this).closest('.gridtable'); 
 
    var $firstCell = $parentRow.find('td:first-child'); 
 
    var $secondCell = $parentRow.find('td:nth-child(2)'); 
 
    var $firstInput = $firstCell.find('input'); 
 
    var $secondInput = $secondCell.find('input'); 
 
    var update_val_1 = $firstInput.val(); 
 
    var update_val_2 = $secondInput.val(); 
 

 
    console.log(update_val_1); 
 
    console.log(update_val_2); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr class="gridtable"> 
 
    <td> 
 
     <input type="text" value="apple" /> 
 
    </td> 
 
    <td> 
 
     <input type="text" value="one" /> 
 
    </td> 
 
    <td> 
 
     <button type="button" class="update_button">UPDATE</button> 
 
    </td> 
 
    </tr> 
 
    <tr class="gridtable"> 
 
    <td> 
 
     <input type="text" value="banana" /> 
 
    </td> 
 
    <td> 
 
     <input type="text" value="three" /> 
 
    </td> 
 
    <td> 
 
     <button type="button" class="update_button">UPDATE</button> 
 
    </td> 
 
    </tr> 
 
    <tr class="gridtable"> 
 
    <td> 
 
     <input type="text" value="berry" /> 
 
    </td> 
 
    <td> 
 
     <input type="text" value="ten" /> 
 
    </td> 
 
    <td> 
 
     <button type="button" class="update_button">UPDATE</button> 
 
    </td> 
 
    </tr> 
 
</table>

Vereinfachtes Beispiel:

$('.update_button').on("click", function() { 
 
    var $parentRow = $(this).closest('.gridtable'); 
 
    var update_val_1 = $parentRow.find('td:first-child input').val(); 
 
    var update_val_2 = $parentRow.find('td:nth-child(2) input').val(); 
 

 
    console.log(update_val_1); 
 
    console.log(update_val_2); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr class="gridtable"> 
 
    <td> 
 
     <input type="text" value="apple" /> 
 
    </td> 
 
    <td> 
 
     <input type="text" value="one" /> 
 
    </td> 
 
    <td> 
 
     <button type="button" class="update_button">UPDATE</button> 
 
    </td> 
 
    </tr> 
 
    <tr class="gridtable"> 
 
    <td> 
 
     <input type="text" value="banana" /> 
 
    </td> 
 
    <td> 
 
     <input type="text" value="three" /> 
 
    </td> 
 
    <td> 
 
     <button type="button" class="update_button">UPDATE</button> 
 
    </td> 
 
    </tr> 
 
    <tr class="gridtable"> 
 
    <td> 
 
     <input type="text" value="berry" /> 
 
    </td> 
 
    <td> 
 
     <input type="text" value="ten" /> 
 
    </td> 
 
    <td> 
 
     <button type="button" class="update_button">UPDATE</button> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 2

Ich bin ein großer Fan der .closest (Selektor) und .find ('Selektor') Methoden.

Der erste geht das Dom hinauf, bis es die erste Übereinstimmung des gegebenen Selektors findet.

Der zweite geht das Dom hinunter und findet alle Übereinstimmungen.

.eq (Index) ist wie Array [Index] für jQuery. Es benötigt eine Sammlung von jQuery-Elementen und gibt die eine im angegebenen Index zurück.

$('.update_button').on("click",function(){ 
    var inputs = $(this).closest('.gridtable').find('input'); 
    var value1 = inputs.eq(0).val(); 
    var value2 = inputs.eq(1).val(); 
});