jQuery get element that triger function

Question

all！我是jquery的初学者。我需要获取我单击的元素。搬到他们的邻居那里并获得他们的价值观。

<td>21</td>
<td>Peter</td>
<td>Admin</td>
<td onclick=fillEditForm()>Edit record</td>

所以我需要单击"编辑记录"并通过以前<td>标签(21，彼得，管理员(的jquery文本获取。 我认为函数必须看起来像这样

function fillEditForm(obj){    
alert(obj.prev().text());
}

Answer 1

试试这段代码

<td onclick=fillEditForm(this)>Edit record</td>

function fillEditForm(obj){    
alert($(obj).prev().text());
}

Answer 2

将

1. 类添加到您点击的 td
2. 使用此上下文告诉点击的 td
3. 使用最接近获取父 tr
4. 使用 .map(( 在 tr 中创建除单击 td 之外的所有 td 的数组

$(".edit").click(function() {
var arr = $(this).closest('tr').find('td:not(.edit)').map(function() {
return $(this).text();
}).get();
console.log(arr)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>11</td>
<td>james</td>
<td>user</td>
<td class="edit">Edit record</td>
</tr>
<tr>
<td>21</td>
<td>Peter</td>
<td>Admin</td>
<td class="edit">Edit record</td>
</tr>
</table>

Answer 3

你需要像这样传递thisfillEditForm(this)并将$(obj)与parent().find()或prev()一起使用，你可以得到你之前的任何td元素。

可以使用$(obj).parent().find('td:not(:last-child)').text()将值放在一起。

或

您可以循环浏览并获取每个文本$(obj).parent().find('td:not(:last-child)').each(function() {

或

您可以使用$(obj).parent().find('td:not(:last-child)').map(function() {获取数组中的所有文本

function fillEditForm(obj) {
console.log($(obj).parent().find('td:not(:last-child)').text()); // get all td except last
console.log($(obj).prev().text()) //get prev text
//get each separately
$(obj).parent().find('td:not(:last-child)').each(function() {
console.log($(this).text());
});
//get results in an array
var results = $(obj).parent().find('td:not(:last-child)').map(function() {
return $(this).text();
}).get();
console.log(results);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>21</td>
<td>Peter</td>
<td>Admin</td>
<td onclick=fillEditForm(this)>Edit record</td>
</tr>
</table>

Answer 4

将this传递给内联单击处理程序。

<td onclick="fillEditForm(this)">Edit record</td>

并将函数修改为

function fillEditForm(obj) {
var arr = $(obj).siblings().map(function() {
return $(this).text();
}).get();
console.log(arr)  
}

---

但是，我建议使用不显眼的事件处理程序。使用正确的语义元素作为分配事件处理程序。然后可以使用各种 DOM 遍历方法来获取所需的信息。

function fillEditForm() {
var arr = $(this).closest('td').siblings().map(function() {
return $(this).text();
}).get();
console.log(arr)  
}
$('.fillEdit').on('click', fillEditForm)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>21</td>
<td>Peter</td>
<td>Admin</td>
<td><button class="fillEdit">Edit record</button></td>
</tr>
</table>