jQuery 如何使用jquery获取父元素值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8174947/
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
How to get the parent element value using jquery?
提问by AJSwift
I have a table with a couple of rows with two cells in each row and each cell has couple of info like office name, address and phone number etc. Using jquery for each, the address is being pulled out from each cell and fed into google map geocoder object to get the point and plot it in the map. Now at each hit of an Address value, I would also like to grab the unique value of phone and office name from the current cell from which jquery is getting address value..I need those values so i can display those values in the InfoWindow of the map? How do I get those values?
我有一个表格，有几行，每行有两个单元格，每个单元格都有一些信息，如办公室名称、地址和电话号码等。 对每个单元格使用 jquery，地址从每个单元格中取出并输入谷歌地图地理编码器对象以获取该点并将其绘制在地图中。现在，在每次命中地址值时，我还想从 jquery 从中获取地址值的当前单元格中获取电话和办公室名称的唯一值..我需要这些值，以便我可以在地图？我如何获得这些值？
<table class="OfficeInfo" border="0" style="width: 100%" cellspacing="10px" cellpadding="15px">
<tr>
<td class="Office1" style="width=40%">
<span class="OfficeName">
<div id="ctl00_PlaceHolderMain_ctl00_ctl17_label" style='display:none'>Office1Link</div><div id="ctl00_PlaceHolderMain_ctl00_ctl17__ControlWrapper_RichLinkField" class="ms-rtestate-field" style="display:inline" aria-labelledby="ctl00_PlaceHolderMain_ctl00_ctl17_label"><div class="ms-rtestate-field"><a href="/" target="_blank">St. Francis Hospital</a></div></div>
</span>
<span class="Address">
2001 86th Street West <br />Indianapolis, IN 46260
</span> <br />
<span class="Phone">
(402) 123-1234</span><br /><br />
<a class="mapdirectionsLink" href="#">map & directions></a><br /><br />
<span class="Hours">
MTW:9:00AM-5:00PM</span>
</td>
<td class="Office2" style="width:40%">
<span class="OfficeName">
<div id="ctl00_PlaceHolderMain_ctl00_ctl21_label" style='display:none'>Office2Link</div><div id="ctl00_PlaceHolderMain_ctl00_ctl21__ControlWrapper_RichLinkField" class="ms-rtestate-field" style="display:inline" aria-labelledby="ctl00_PlaceHolderMain_ctl00_ctl21_label"><div class="ms-rtestate-field"><a href="/" target="_blank">St. Margaret's Hospital</a></div></div>
</span>
<span class="Address">
8075 North Shadeland Avenue <br />Indianapolis, IN 46250</span><br />
<span class="Phone">
(316) 123-3245</span><br /><br />
<a class="mapdirectionsLink" href="#">map & directions></a><br /><br />
<span class="Hours">
MTW:9:00AM-5:00PM</span>
</td>
</tr>
<tr>
<td class="Office3" style="border-top:1px dotted silver; width:40%;">
<span class="OfficeName">
<div id="ctl00_PlaceHolderMain_ctl00_ctl25_label" style='display:none'>Office3Link</div><div id="ctl00_PlaceHolderMain_ctl00_ctl25__ControlWrapper_RichLinkField" class="ms-rtestate-field" style="display:inline" aria-labelledby="ctl00_PlaceHolderMain_ctl00_ctl25_label"><div class="ms-rtestate-field"><a href="/" target="_blank">Munster Women's Center</a></div></div>
</span>
<span class="Address">
395 Westfield Road <br />Noblesville, IN 46060</span><br />
<span class="Phone">
(316) 123-3245</span><br /><br />
<a class="mapdirectionsLink" href="#">map & directions></a><br /><br />
<span class="Hours">
MTW:9:00AM-5:00PM</span>
</td>
<td style="border-top:1px dotted silver; width:40%">
</td>
</tr>
</table>
function codeAddress() {
var infowindow = new google.maps.InfoWindow({});
$('span.Address').each(function(index) {
var addy = $(this).text();
var off_name = $(this).siblings('.OfficeName').children(.ms-rtestate-field).text();
var infowindow = new google.maps.InfoWindow({ content: 'Hello world' });
geocoder.geocode( { 'address': addy}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
title:addy
});
//var currentCell=(this).closest(td).html());
// Adding a click event to the marker
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent('<span style="color:#808080; font-size:13px; font-family:Trebuchet">'+addy
+'<br> <a href="http://maps.google.com/maps?saddr=&daddr=' + this.position.toUrlValue() + '" target ="_blank">Get Direction To Here<\/a>'+
off_name + '</span>');
infowindow.open(map, this);
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
});
}
回答by Yes Barry
Depending on the current context of this, then this should work:
根据 的当前上下文this，这应该有效：
$(this).parent().find('.officeName').html();
回答by user3632632
We can do this by using jquery OR Javascript. here we are going to discuss with email id updates.
我们可以通过使用 jquery 或 Javascript 来做到这一点。在这里，我们将讨论电子邮件 ID 更新。
in bellow example a pop up window will open with auto fill email id from parent window. after update, a email will automatically update in parent window text box and pop up window will have closed autocratically.
在下面的示例中，将打开一个弹出窗口，其中包含来自父窗口的自动填充电子邮件 ID。更新后，电子邮件将在父窗口文本框中自动更新，弹出窗口将自动关闭。
Example:
例子：
1) Create file index.html asa parent windows
1) 创建文件 index.html 作为父窗口
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<html>
<title></title>
<head></head>
<body>
<table>
<tr>
<td colspan=”2″>Example for update email id.</td>
</tr>
<tr>
<td>Email Id:</td>
<td>
<input type='text' name=”emailID” id=”emailId” value=”[email protected]”></td>
</tr>
<tr>
<td>
<input type=”button” name=”update” value=”Update”
onClick='window.open(“update_popup.html”, “”, “width=400, height=300″)'>
</td>
</tr>
</table>
</body>
</html>
2) Create file update_popup.html as apop up window where email id auto fill from parent window for update.
2) 创建文件 update_popup.html 作为弹出窗口，其中电子邮件 ID 从父窗口自动填充以进行更新。
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<html>
<title></title>
<head></head>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js”></script>
<script>
$(document).ready(function(){
//== pre fill parent window email id in popup window for update
var emailId = window.opener.document.getElementById(“emailId”).value;
$(“#emailId”).val(emailId);
//=== update updated email id in to parent window
$(“#Save”).on(‘click',function(){
var updated_emailId = $(“#emailId”).val();
window.opener.document.getElementById(“emailId”).value = updated_emailId;
window.close();
});
});
</script>
<body>
<table>
<tr>
<td>Email Id:</td>
<td>
<input type='text' name=”emailID” id=”emailId” value=””></td>
</tr>
<tr>
<td><input type=”button” name=”Save” id=”Save” value=”Save”></td>
</tr>
</table>
</body>
</html>
for more details..
更多细节..
回答by Zoltan Toth
$(this).siblings('.Phone').html()and $(this).siblings('.Address').html()
$(this).siblings('.Phone').html()和 $(this).siblings('.Address').html()
回答by Akshay Khandelwal
Here is a small and simple but good for starters, a PDF for Jquery. Try using Jquery Cheat Sheetas it contains solution to most of your problems.
这是一个小而简单但适合初学者的 PDF，用于 Jquery。尝试使用Jquery Cheat Sheet，因为它包含您大部分问题的解决方案。
回答by Tim Hobbs
$(this).parent().find(".OfficeName").text()gets the office name and $(this).parent().find(".Phone").text()gets the phone for each address.
$(this).parent().find(".OfficeName").text()获取办公室名称并$(this).parent().find(".Phone").text()获取每个地址的电话。
jsfiddle- click on an address and it'll show the name and phone in an alert.
jsfiddle- 单击一个地址，它会在警报中显示姓名和电话。
回答by Rich O'Kelly
$('td.Office1').chilldren('.Phone')
Will get you the phone number for Office 1 from the Office 1 td
将从 Office 1 td 获取 Office 1 的电话号码
$('span.Address').siblings('.Phone')
Will get you the phone number from the Address spans
将从地址跨度中获取电话号码
