当所有div具有相同的类时，如何检索单个文本值

Question

我有一个带有超链接的研究站点地址，允许用户直接通过电子邮件发送研究站点。 最终，我需要某种jQuery函数，以返回用户单击的任何电子邮件链接上方的街道地址。

这是我正在使用的功能，具有如下所示的HTML。 每次我单击“通过电子邮件发送此站点”时，它将返回页面上显示的所有地址。 我只想显示我选择通过电子邮件发送的站点的地址。

 $('.doctor-email').click(function(e){ var address = $('.doctor-address').text(); console.log(address); }) 

 <div class="doctor-address">740 South Lindy Street<br>J401<br>Burbank,&nbsp;CA&nbsp;40536</div> <div class="doctor-directions"> <a href="javascript: void(0);" onclick="javascript: ViewMap('https://maps.google.com/?daddr=740+South+Limestone+Street%2c+Lexington%2c+KY+40536');"> Get Directions </a> </div> </div> <div class="col-sm-6"> <p class="doctor-email"> <a href="javascript: ContactSite('5859')"> Email this site </a> </p> </div> </div> </div> <div class="col-xs-10 col-sm-9"> <div class="row"> <div class="col-sm-6"> <div class="doctor-address">800 South West Street<br>J401<br>Lexington,&nbsp;KY&nbsp;40536</div> <div class="doctor-directions"> <a href="javascript: void(0);" onclick="javascript: ViewMap('https://maps.google.com/?daddr=800+South+West+Street%2c+Chicago%2c+IL+40536');"> Get Directions </a> </div> </div> <div class="col-sm-6"> <p class="doctor-email"> <a href="javascript: ContactSite('5859')"> Email this site </a> </p> </div> </div> </div> </div> <div class="col-xs-10 col-sm-9"> <div class="row"> <div class="col-sm-6"> <div class="doctor-address">900 Delavan Street<br>J401<br>Buffalo,&nbsp;NY&nbsp;40536</div> <div class="doctor-directions"> <a href="javascript: void(0);" onclick="javascript: ViewMap('https://maps.google.com/?daddr=900+Delavan+Street%2c+Chicago%2c+IL+40536');"> Get Directions </a> </div> </div> <div class="col-sm-6"> <p class="doctor-email"> <a href="javascript: ContactSite('5859')"> Email this site </a> </p> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 

我对javascript非常陌生，因此欢迎您提供任何反馈。

谢谢！ 布雷特

Answer 1

尝试这个。

$('.doctor-email').click(function(e){
    //go up to the contextual row, and then find the nested address
    var address = $(this).closest('.row').find('.doctor-address').text();
    console.log(address);
});

Answer 2

只需将选择器替换this ，它就会创建一个引用您单击的项目的JQuery对象。

更新：

 $('.doctor-email').click(function(e){ var address = $(this).parents(".row").find(".doctor-address").text(); console.log(address); }) 

 <div class="doctor-address">740 South Lindy Street<br>J401<br>Burbank,&nbsp;CA&nbsp;40536</div> <div class="doctor-directions"> <a href="javascript: void(0);" onclick="javascript: ViewMap('https://maps.google.com/?daddr=740+South+Limestone+Street%2c+Lexington%2c+KY+40536');"> Get Directions </a> </div> </div> <div class="col-sm-6"> <p class="doctor-email"> <a href="javascript: ContactSite('5859')"> Email this site </a> </p> </div> </div> </div> <div class="col-xs-10 col-sm-9"> <div class="row"> <div class="col-sm-6"> <div class="doctor-address">800 South West Street<br>J401<br>Lexington,&nbsp;KY&nbsp;40536</div> <div class="doctor-directions"> <a href="javascript: void(0);" onclick="javascript: ViewMap('https://maps.google.com/?daddr=800+South+West+Street%2c+Chicago%2c+IL+40536');"> Get Directions </a> </div> </div> <div class="col-sm-6"> <p class="doctor-email"> <a href="javascript: ContactSite('5859')"> Email this site </a> </p> </div> </div> </div> </div> <div class="col-xs-10 col-sm-9"> <div class="row"> <div class="col-sm-6"> <div class="doctor-address">900 Delavan Street<br>J401<br>Buffalo,&nbsp;NY&nbsp;40536</div> <div class="doctor-directions"> <a href="javascript: void(0);" onclick="javascript: ViewMap('https://maps.google.com/?daddr=900+Delavan+Street%2c+Chicago%2c+IL+40536');"> Get Directions </a> </div> </div> <div class="col-sm-6"> <p class="doctor-email"> <a href="javascript: ContactSite('5859')"> Email this site </a> </p> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 

Answer 3

要访问单个地址，您应该输入id。

正如Mike从当前上下文中建议的那样，其他方法是使用jQuery prev()函数获取地址文本。

参考： prev（）