jQuery 在行中查找带有 id 的元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25123798/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery find element with id in row
提问by pobliska
I have a simple table, I'm trying to send text value from cells .name and .date into form using jQuery. This script works pretty well, but I don't know how find only text with class for example .name in only this row, where the user cliced on Book-button.
我有一个简单的表格，我正在尝试使用 jQuery 将单元格 .name 和 .date 中的文本值发送到表单中。这个脚本工作得很好，但我不知道如何只在这一行中找到带有类的文本，例如 .name ，用户点击 Book-button 。
My table structure:
我的表结构：
<table id="myTable">
<thead>
<tr>
<th>Name</th>
<th>Date</th>
<th>Place</th>
<th>Price</th>
<th>Hours</th>
<th>Book</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><a href="#" title="title1">Camp1</a></td> //send to form this value
<td class="date">10.09 - 15.09.2014 r.</td> //send to form this value
<td>Brighton</td>
<td>555 EURO</td>
<td>20</td>
<td class="book"><button>Book<button></td> //when user click on this button
</tr>
<tr>
<td class="name"><a href="#" title="title1">Camp2</a></td>
<td class="date">02.09 - 22.09.2014 r.</td>
<td>Brighton</td>
<td>432 EURO</td>
<td>20</td>
<td class="book"><button>Book<button></td>
</tr>
<tr>
<td class="name"><a href="#" title="title1">Camp3</a></td>
<td class="date">23.09 - 27.09.2014 r.</td>
<td>Brighton</td>
<td>123 EURO</td>
<td>20</td>
<td class="book"><button>Book<button></td>
</tr>
</tbody></table>
</tbody>
</table>
My script:
我的脚本：
<script>
$( "button" ).click(function() {
var text = $( '.name' ).text();
$( "#name" ).val( text );
var text = $( '.date' ).text();
$( "#date" ).val( text );
});
</script>
My form:
我的表格：
<fieldset id="contact_form" style="display:none;">
<div id="result"></div>
<label for="name"><span>Name</span>
<input type="text" name="name" id="name" placeholder="Enter Your Name" />
</label>
<label for="email"><span>Email Address</span>
<input type="email" name="email" id="email" placeholder="Enter Your Email" />
</label>
<label><span> </span>
<button class="submit_btn" id="submit_btn">Submit</button>
</label>
</fieldset>
<button c
lass="submit_btn" id="submit_btn">Submit</button>
</label>
</fieldset>
回答by Blazemonger
http://api.jquery.com/category/traversing/tree-traversal/
http://api.jquery.com/category/traversing/tree-traversal/
$( "button" ).click(function() {
var text = $(this).closest('tr').find('.name').text();
$( "#name" ).val( text );
text = $(this).closest('tr').find('.date').text();
$( "#date" ).val( text );
});
Better yet, surround each button with a <form>with <input type="hidden">elements containing that data, and it will work even without JavaScript enabled.
更好的是，<form>用<input type="hidden">包含该数据的元素包围每个按钮，即使没有启用 JavaScript，它也能工作。
回答by Pluto
The problem is in your JavaScript. You need to target only what the user clicked. This can be done by using the thisobject in in the click callback function.
问题出在您的 JavaScript 中。您只需要定位用户点击的内容。这可以通过this在单击回调函数中使用对象来完成。
$( ".book button" ).click(function() {
var tr = $( this ).parents('tr');
$( "#name" ).val( tr.find('.name').text() );
$( "#date" ).val( tr.find('.date').text() );
});
Other notes:
其他注意事项：
- You can only use
varto declare a variable once. Afterwards, use the variable withoutvar. //Cannot be used for commenting in HTML. You must use<!--and-->
- 您只能使用
var一次来声明一个变量。之后，使用不带var. //不能用于 HTML 中的注释。您必须使用<!--和-->
回答by RGS
$("button").click(function() {
var text1 = $(this).closest('tr').find('.name').text();
alert(text);
$("#name").val( text1 );
var text2 = $(this).closest('tr').find('.date').text();
$("#date").val( text2 );
});
Demo:
演示：
回答by Xriuk
This ahould work.$("button").click(function(){var text = $(this).parent("tr").children(".name").text();});
这应该行得通。$("button").click(function(){var text = $(this).parent("tr").children(".name").text();});
回答by Patrick Grimard
Check out this jsfiddle http://jsfiddle.net/Dz24f/
看看这个 jsfiddle http://jsfiddle.net/Dz24f/
Basically when you click a button, you need to get it's parent element, which is the row, then get siblings of that row with the given jquery selector.
基本上，当您单击按钮时，您需要获取它的父元素，即行，然后使用给定的 jquery 选择器获取该行的兄弟元素。
$("button").click(function () {
var _this = $(this);
var text = _this.parent().siblings('.name').text();
console.debug(text);
$("#name").val(text);
var date = _this.parent().siblings('.date').text();
console.debug(date);
$("#date").val(date);
});
回答by Super Model
Find elements with id in row and assign to other elements using jquery
在行中查找具有 id 的元素并使用 jquery 分配给其他元素
$(document).ready(function () {
$("button").click(function() {
//find content of different elements inside a row.
var nameTxt = $(this).closest('tr').find('.name').text();
var emailTxt = $(this).closest('tr').find('.email').text();
//assign above variables text1,text2 values to other elements.
$("#name").val( nameTxt );
$("#email").val( emailTxt );
});
});
