我想在单击该tr中的按钮时找到最接近的td

Question

问题是，即使单击第二个按钮，它也只能找到第一个凭据。所以我希望如果我点击第二个按钮，它应该给我那个按钮与用户名和密码最近的td

＆＃13;

＆＃13;

$(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();
    });
  });
});

＆＃13;

<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">abc.user1@gmail.com</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">xyz@gmail.com</td>
    <td style="padding: 3px" class="loginPassword">Asdf1234!</td>
    <td style="padding: 3px">
      <button class="jsLoginButton">login</button>
    </td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

问题是因为您正在使用类选择器来查找所有.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); }); });元素的集合。试试这个：

＆＃13;

＆＃13;

<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">abc.user1@gmail.com</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">xyz@gmail.com</td>
    <td style="padding: 3px" class="loginPassword">Asdf1234!</td>
    <td style="padding: 3px">
      <button class="jsLoginButton">login</button>
    </td>
  </tr>
</table>

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用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(); }); }); }); 。像这样：

row = image[height, 0:-1]

Answer 3

试试这个

＆＃13;

＆＃13;

$(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();
    });
  });

＆＃13;

<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">abc.user1@gmail.com</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">xyz@gmail.com</td>
    <td style="padding:3px" class="loginPassword">Asdf1234!</td>
    <td style="padding:3px">
      <button class="jsLoginButton">login</button>
    </td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;