當所有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（）