そのtrのボタンがクリックされたときに最も近いtdを見つけたい

Question

2番目のボタンをクリックしても、最初の資格情報しか見つからないという問題があります。だから私は、私は2番目のボタンをクリックした場合、それはユーザ名とパスワード

$(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">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>

JSフィドルと私にそのボタンの最も近いTDを与えるべきことをしたいhttps://jsfiddle.net/parag_bandewar/c8w73rup/

Answer 1

問題はあなたのために「ですクラスセレクタを使って.loginIDと.loginPasswordの要素をすべて見つけてください。

代わりに、thisキーワードを使用して、イベントを発生させた要素を参照することで、ロジックを修正できます。そこからclosest('tr')を使用して行を取得し、find()を使用して必要な要素を選択することができます。また、each()コールは必要ありません。 click()をすべての.jsLoginButton要素のコレクションに直接適用することができます。あなたが欲しいtdを取得するためにfindを使用し、そこから、trを取得するために

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">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>

Answer 2

使用closest：これを試してみてください。このように：

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

    }); 
    }); 
}); 

Answer 3

したいtdのこの

$(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">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>