logo标签列表

如何使用jQuery获取父元素的值？

jqueryelementparentsiblingsparents
3

我有一个表，每行有两个单元格，每个单元格都有一些信息，如办公室名称、地址和电话号码等。使用jQuery的each方法，从每个单元格中获取地址，并将其传递给Google地图地理编码器对象以获取该点并在地图上绘制它。现在，在每次命中地址值时，我还想从当前单元格中抓取电话和办公室名称的唯一值，以便在地图的信息窗口中显示这些值。我该怎么做才能获得这些值呢？

<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 &#38; directions&#62;</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 &#38; directions&#62;</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 &#38; directions&#62;</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);
            }
        });
    });
}
最好也把你的JavaScript代码添加进来，或者更好的方法是：只粘贴相关部分，其余部分添加到jsfiddle（http://jsfiddle.net）。 - Arend
我现在已经添加了JavaScript... 我想要获取“this”当前上下文中的办公室名称和电话号码。 - AJSwift
不是我要挑剔细节，我建议您使用唯一的ID标识元素，而不是类。这样，您可以针对特定的元素进行目标定位。尽管您可以使用类来实现此目的，但类旨在成为可以由许多元素共享的通用声明，而ID则是特定于单个元素的唯一标识。 - Stephane Gosselin
从 ctl00_... id 的样子来看，他正在使用 ASP.NET。由于 WebForms 对 ID 进行了如此糟糕的处理，因此通常更容易使用类名（这就是我所做的）而不是在各个地方添加 <% [ControlID].ClientID %> 代码。但是，如果您想要唯一的元素，则需要至少具有唯一的类名，如果您没有使用 ID 的话，我同意这一点。 - Tim Hobbs
6个回答
7

根据当前上下文中的this，这应该可以工作：

$(this).parent().find('.officeName').html();
1
这样做就可以了。感谢所有努力回答我的问题并解决我的问题的人。我非常感激！AJ - AJSwift
我正在使用由服务器端脚本生成的动态HTML，但这种方法对我不起作用。我有什么遗漏的地方吗？以下是我的脚本示例： $(this).parent().find('#msg').html(); - Wafie Ali
@WafieAli 我不确定。我需要看到您的脚本更多内容才能确定。您可以在pastebin或其他地方粘贴它吗？ - Yes Barry
@YesBarry 这是我尝试的一个例子： html, script 脚本的预期结果是，子表将从其父单元格的某一列中获取值。 - Wafie Ali
1
@是的，Barry，谢谢你。$(this).parent().parent().find('a span.family-price').attr('style', 'visibility: hidden;'); - Olivier
1
@Olivier，你可以使用.parents(selector)或.closest(selector)来缩短代码。如果你想向上跨越两个父元素，可以使用$(this).parents().eq(1).find('a span.family-price')...。 - Yes Barry
2

$(this).siblings('.Phone').html()和$(this).siblings('.Address').html()

“.val()不只是用于input吗？” 编辑： 呃，还有option之类的。 - Xyan Ewing
@XyanEwing 你是对的 - 需要使用 .html() 而不是 .val()。 - Zoltan Toth
2
我们可以使用jQuery或JavaScript来实现这一点。在此，我们将讨论电子邮件ID更新。
在下面的示例中，将打开一个弹出窗口，并自动填充来自父窗口的电子邮件ID。更新后，电子邮件将自动更新在父窗口文本框中，并且弹出窗口将自动关闭。
示例：
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=”demo@demo.com”></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）创建名为file 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>

获取使用jQuery弹出窗口中父窗口元素的值的方法，请参阅http://www.delhincrjob.com/blog/how-to-get-the-parent-window-element-value-in-popup-window-using-jquery/。

0

$(this).parent().find(".OfficeName").text() 获取办公室名称，$(this).parent().find(".Phone").text() 获取每个地址的电话。

jsfiddle - 点击地址，将在警报中显示名称和电话。

感谢您进行演示！非常感激！！ - AJSwift
没问题。希望对你有所帮助。 :) - Tim Hobbs
0

这里有一个适合初学者的小而简单但不错的Jquery PDF。尝试使用Jquery Cheat Sheet，它包含了大部分问题的解决方案。

0
$('td.Office1').chilldren('.Phone')

将从Office 1 td获取Office 1的电话号码

$('span.Address').siblings('.Phone')

将从地址跨度中获取电话号码

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接