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

Question

我有一个带有 hyperlinks 的研究站点地址块，允许用户直接通过电子邮件发送研究站点。最终，我想要某种 jQuery 函数，即 returns 用户点击的任何电子邮件 link 上方的街道地址。

这是我正在使用的函数，HTML 如下所示。每次我点击 'Email this Site' 它 returns 页面上显示的所有地址。但是，我希望它只显示我选择通过电子邮件发送的网站地址。

$('.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

只需将选择器替换为 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 2

试试这个。

$('.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 3

要访问个人地址，您应该使用 id。

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

参考：prev()

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

How do I retrieve individual text values when all divs have same class

html

javascript

jquery

google-tag-manager