在点击时检索父文本（jQuery）

我试图选择第一个td元素，当点击“添加”按钮时。在点击时检索父文本（jQuery）

   <tr> 
       <td>tt3783958</td> 
       <td>La La Land</td> 
       <td>2016</td> 
       <td>Comedy, Drama, Music</td> 
       <td> 
        <button class="btn btn-outline-success">Add</button> 
       </td> 
       </tr>

我不明白我在这里做错了什么。

$(document).ready(function() { 
    $(".btn.btn-outline-success").eq(0).click(function() { 
    var test = $(this).parent().parent().find("td").first() 
    console.log(test) 
    var fest = $(this).find("td").first() 
    console.log(fest) 
    }); 
});

现场演示：https://jsfiddle.net/ma1Lac9v/2/

来源

2017-06-03 Slasher

你不需要eq(0)。 eq(0)表示具有零索引的选择器，因此只将事件添加到第一个按钮。您可以使用closest()函数来选择第一个父元素。

$(document).ready(function() { 
 
    $(".btn.btn-outline-success").click(function() { 
 
    var test = $(this).closest("tr").find('td').first().text() 
 
    console.log(test) 
 
    }); 
 
});

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <script data-require="[email protected]*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <link data-require="[email protected]" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" /> 
 
    <script src="script.js"></script> 
 
    </head> 
 
    <body> 
 
    <div class="container"> 
 
     <div class="row"> 
 
     <div class="col"> 
 
      <table class="table"> 
 
      <thead class="thead-inverse"> 
 
       <tr> 
 
       <th>id</th> 
 
       <th>Title</th> 
 
       <th>Year</th> 
 
       <th>Type</th> 
 
       <th>Option</th> 
 
       </tr> 
 
      </thead> 
 
      <tbody> 
 
       <tr> 
 
       <td>tt3783958</td> 
 
       <td>La La Land</td> 
 
       <td>2016</td> 
 
       <td>Comedy, Drama, Music</td> 
 
       <td> 
 
        <button class="btn btn-outline-success">Add</button> 
 
       </td> 
 
       </tr> 
 
       <tr> 
 
       <td>tt0488120</td> 
 
       <td>Fracture</td> 
 
       <td>2007</td> 
 
       <td>Crime, Drama, Mystery</td> 
 
       <td> 
 
        <button class="btn btn-outline-success">Add</button> 
 
       </td> 
 
       </tr> 
 
       <tr> 
 
       <td>tt3569230</td> 
 
       <td>Legend</td> 
 
       <td>2015</td> 
 
       <td>Biography, Crime, Drama</td> 
 
       <td> 
 
        <button class="btn btn-outline-success">Add</button> 
 
       </td> 
 
       </tr> 
 
       <tr> 
 
       <td>tt2692904</td> 
 
       <td>Locke</td> 
 
       <td>2013</td> 
 
       <td>Drama</td> 
 
       <td> 
 
        <button class="btn btn-outline-success">Add</button> 
 
       </td> 
 
       </tr> 
 
       <tr> 
 
       <td>tt1392190</td> 
 
       <td>Mad Max: Fury Road</td> 
 
       <td>2015</td> 
 
       <td>Action, Adventure, Sci-Fi</td> 
 
       <td> 
 
        <button class="btn btn-outline-success">Add</button> 
 
       </td> 
 
       </tr> 
 
       <tr> 
 
       <td>tt0993846</td> 
 
       <td>The Wolf of Wall Street</td> 
 
       <td>2013</td> 
 
       <td>Biography, Comedy, Crime</td> 
 
       <td> 
 
        <button class="btn btn-outline-success">Add</button> 
 
       </td> 
 
       </tr> 
 
      </tbody> 
 
      </table> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </body> 
 

 
</html>

来源

2017-06-03 21:02:43

那么，如果你检查现场演示，我需要它，因为我有多重e按钮。 – Slasher

查看https://jsfiddle.net/axvno8hs/ –

你可以调用'text（）'来获取元素的文本。 –

您可以选择closest TR，然后第一个TD：

$(this).closest('tr').find("td:first")

$(".btn.btn-outline-success").on('click', function(e) { 
 
    var test = $(this).closest('tr').find("td:first"); 
 
    console.log(test.text()); 
 
});

<script data-require="[email protected]*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" /> 
 

 

 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col"> 
 
      <table class="table"> 
 
       <thead class="thead-inverse"> 
 
       <tr> 
 
        <th>id</th> 
 
        <th>Title</th> 
 
        <th>Year</th> 
 
        <th>Type</th> 
 
        <th>Option</th> 
 
       </tr> 
 
       </thead> 
 
       <tbody> 
 
       <tr> 
 
        <td>tt3783958</td> 
 
        <td>La La Land</td> 
 
        <td>2016</td> 
 
        <td>Comedy, Drama, Music</td> 
 
        <td> 
 
         <button class="btn btn-outline-success">Add</button> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td>tt0488120</td> 
 
        <td>Fracture</td> 
 
        <td>2007</td> 
 
        <td>Crime, Drama, Mystery</td> 
 
        <td> 
 
         <button class="btn btn-outline-success">Add</button> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td>tt3569230</td> 
 
        <td>Legend</td> 
 
        <td>2015</td> 
 
        <td>Biography, Crime, Drama</td> 
 
        <td> 
 
         <button class="btn btn-outline-success">Add</button> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td>tt2692904</td> 
 
        <td>Locke</td> 
 
        <td>2013</td> 
 
        <td>Drama</td> 
 
        <td> 
 
         <button class="btn btn-outline-success">Add</button> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td>tt1392190</td> 
 
        <td>Mad Max: Fury Road</td> 
 
        <td>2015</td> 
 
        <td>Action, Adventure, Sci-Fi</td> 
 
        <td> 
 
         <button class="btn btn-outline-success">Add</button> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td>tt0993846</td> 
 
        <td>The Wolf of Wall Street</td> 
 
        <td>2013</td> 
 
        <td>Biography, Comedy, Crime</td> 
 
        <td> 
 
         <button class="btn btn-outline-success">Add</button> 
 
        </td> 
 
       </tr> 
 
       </tbody> 
 
      </table> 
 
     </div> 
 
    </div> 
 
</div>

来源

2017-06-03 21:09:36 gaetanoM

在点击时检索父文本（jQuery）

回答

相关问题