我想找到最接近的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中的按钮时

回答

相关问题