我想找到最接近的td，當點擊tr中的按鈕時

問題是，即使第二個按鈕被點擊，它也只能找到第一個憑證。所以我想，如果我點擊第二個按鈕，它應該給我說按鈕的最接近的TD用戶名和密碼我想找到最接近的td，當點擊tr中的按鈕時

$(document).ready(function() { 
 
    $(".jsLoginButton").each(function() { 
 
    $(this).click(function() { 
 
     //Get login details 
 
     configuration.loginPage.LOGIN_ID = $('.loginID').closest('td').filter(':first').text(); 
 
     configuration.loginPage.LOGIN_PASSWORD = $('.loginPassword').closest('td').filter(':first').text(); 
 
    }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <thead> 
 
    <tr> 
 
     <th style="padding: 3px">Username</th> 
 
     <th style="padding: 3px">Password</th> 
 
     <th style="padding: 3px">Action</th> 
 
    </tr> 
 
    </thead> 
 
    <tr> 
 
    <td style="padding: 3px" class="loginID">[email protected]</td> 
 
    <td style="padding: 3px" class="loginPassword">Asdf1234!</td> 
 
    <td style="padding: 3px"> 
 
     <button class="jsLoginButton">login</button> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td style="padding: 3px" class="loginID">[email protected]</td> 
 
    <td style="padding: 3px" class="loginPassword">Asdf1234!</td> 
 
    <td style="padding: 3px"> 
 
     <button class="jsLoginButton">login</button> 
 
    </td> 
 
    </tr> 
 
</table>

JS小提琴https://jsfiddle.net/parag_bandewar/c8w73rup/

來源

2017-02-14 Parag Bandewar

TD你要哪個？ –

最近的一個之後？ –

如果我點擊第二次登錄按鈕，它應該選擇[email protected]而不是[email protected] –

的問題是因爲你」重新使用類選擇器來查找所有的.loginID和.loginPassword元素。

相反，您可以通過使用關鍵字this來引用引發事件的元素來修復邏輯。從那裏您可以使用closest('tr')獲取該行，並使用find()選擇所需的元素。另請注意，您不需要撥打each()。您可以直接將click()應用於所有.jsLoginButton元素的集合。試試這個：

var configuration = { 
 
    loginPage: {} 
 
} 
 

 
$(document).ready(function() { 
 
    $(".jsLoginButton").click(function() { 
 
    var $tr = $(this).closest('tr'); 
 

 
    configuration.loginPage.LOGIN_ID = $tr.find('.loginID').text(); 
 
    configuration.loginPage.LOGIN_PASSWORD = $tr.find('.loginPassword').text() 
 

 
    console.log(configuration); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <thead> 
 
    <tr> 
 
     <th style="padding: 3px">Username</th> 
 
     <th style="padding: 3px">Password</th> 
 
     <th style="padding: 3px">Action</th> 
 
    </tr> 
 
    </thead> 
 
    <tr> 
 
    <td style="padding: 3px" class="loginID">[email protected]</td> 
 
    <td style="padding: 3px" class="loginPassword">Asdf1234!</td> 
 
    <td style="padding: 3px"> 
 
     <button class="jsLoginButton">login</button> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td style="padding: 3px" class="loginID">[email protected]</td> 
 
    <td style="padding: 3px" class="loginPassword">Asdf1234!</td> 
 
    <td style="padding: 3px"> 
 
     <button class="jsLoginButton">login</button> 
 
    </td> 
 
    </tr> 
 
</table>

來源

2017-02-14 13:24:49

謝謝。有效。 –

使用closest得到tr，從那裏用find得到td你想要的。就像這樣：

$(document).ready(function() { 
    $(".jsLoginButton").each(function() { 
    $(this).click(function() { 
     //Get login details 
     configuration.loginPage.LOGIN_ID = $(this).closest('tr').find('.loginID').text(); 
     configuration.loginPage.LOGIN_PASSWORD = $(this).closest('tr').find('.loginPassword').text(); 

    }); 
    }); 
});

來源

2017-02-14 13:25:19

嘗試這個

$(document).ready(function() { 
 
    $(".jsLoginButton").click(function() { 
 
     configuration.loginPage.LOGIN_ID = $(this).closest('td').siblings('.loginID').text(); 
 
     configuration.loginPage.LOGIN_PASSWORD =$(this).closest('td').siblings('.loginPassword').text(); 
 
    }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table> 
 
    <thead> 
 
    <tr> 
 
     <th style="padding:3px">Username</th> 
 
     <th style="padding:3px">Password</th> 
 
     <th style="padding:3px">Action</th> 
 
    </tr> 
 
    </thead> 
 
    <tr> 
 
    <td style="padding:3px" class="loginID">[email protected]</td> 
 
    <td style="padding:3px" class="loginPassword">Asdf1234!</td> 
 
    <td style="padding:3px"> 
 
     <button class="jsLoginButton">login</button> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td style="padding:3px" class="loginID">[email protected]</td> 
 
    <td style="padding:3px" class="loginPassword">Asdf1234!</td> 
 
    <td style="padding:3px"> 
 
     <button class="jsLoginButton">login</button> 
 
    </td> 
 
    </tr> 
 
</table>

來源

2017-02-14 13:34:15 Parithiban

我想找到最接近的td，當點擊tr中的按鈕時

回答

相關問題