如何使用jQuery获取特定的div值

Question

在这里我有一行，在那一行中有3个div，我的要求是假设如果我单击免费计划按钮，则意味着我只想使用特定的div值，例如“计划名称”：“免费计划”和“奖励联系方式” ：00，我尝试过，但是如果有人知道请更新我的答案，我将无法获取确切的值。请参阅下面的内容，我已将我的代码发布了我尝试过的代码，为此花了太多钱，但仍然没有得到我的答案。

<section id="pricing-table">
  <div class="row pricelistNew">
    <div class="pricing"> 
      <div class="col-md-4 col-sm-12 col-xs-12">
        <div class="pricing-table">
          <div class="pricing-header">
            <p class="pricing-title myTitle">Easy Plan </p>    
            <p class="pricing-rate">₹ 1000 <br><span>Including All Tax</span></p>
            <a class="btn btn-custom payNow">Easy Plan</a>
          </div>

          <div class="pricing-list">
            <ul>
              <li>Contacts details up to : 25</li>
              <li>Bonus Contact details up to : 2</li>
              <li>Area Master Assistance : No</li>
              <li>Contact details through sms : Yes</li>
            </ul>
          </div>
        </div>
      </div>

      <div class="col-md-4 col-sm-12 col-xs-12">
        <div class="pricing-table">
          <div class="pricing-header">
            <p class="pricing-title myTitle">Cool Plan </p>
            <p class="pricing-rate">₹ 2000 <br><span>Including All Tax</span></p>
            <a class="btn btn-custom payNow">Cool Plan</a>
          </div>

          <div class="pricing-list">
            <ul>
              <li>Contacts details up to : 48</li>
              <li>Bonus Contact details up to : 4</li>
              <li>Area Master Assistance : Yes</li>
              <li>Contact details through sms : Yes</li>
            </ul>
          </div>
        </div>
      </div>

      <div class="col-md-4 col-sm-12 col-xs-12">
        <div class="pricing-table">
          <div class="pricing-header">
            <p class="pricing-title myTitle">Free Plan </p>   
            <p class="pricing-rate">₹ 0 <br><span>Including All Tax</span></p>
            <a class="btn btn-custom payNow">Free Plan</a>
          </div>

          <div class="pricing-list">
            <ul>
              <li>Contacts details up to : 5</li>
              <li>Bonus Contact details up to : 00</li>
              <li>Area Master Assistance : No</li>
              <li>Contact details through sms : Yes</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

我的jQuery代码

$(function() {
  $(".payNow").on("click", function(e) {
    var $list = $(this).closest(".pricelistNew");
    name = $list.find(".myTitle").text();
    console.log(name);
  });
});

在这里，我得到所有标题名称，例如

简易计划酷计划免费计划

Answer 1

以此替换您的脚本。

$(function() {
  $(".payNow").on("click", function(e) {
    var $list = $(this).closest(".pricing-table");
      name = $list.find(".myTitle").text();

    console.log(name);
  });
});

Answer 2

尝试这个。

 $(function() { $(".payNow").on("click", function(e) { var list = $(this).closest(".pricing-header"); var name = list.find(".myTitle").text(); console.log(name); }); }); 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" > <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section id="pricing-table"> <div class="row pricelistNew"> <div class="pricing"> <div class="col-md-4 col-sm-12 col-xs-12"> <div class="pricing-table"> <div class="pricing-header"> <p class="pricing-title myTitle">Easy Plan </p> <p class="pricing-rate">₹ 1000 <br><span>Including All Tax</span> </p> <a class="btn btn-custom payNow">Easy Plan</a> </div> <div class="pricing-list"> <ul> <li>Contacts details up to : 25</li> <li>Bonus Contact details up to : 2</li> <li>Area Master Assistance : No</li> <li>Contact details through sms : Yes</li> </ul> </div> </div> </div> <div class="col-md-4 col-sm-12 col-xs-12"> <div class="pricing-table"> <div class="pricing-header"> <p class="pricing-title myTitle">Cool Plan </p> <p class="pricing-rate">₹ 2000 <br><span>Including All Tax</span> </p> <a class="btn btn-custom payNow">Cool Plan</a> </div> <div class="pricing-list"> <ul> <li>Contacts details up to : 48</li> <li>Bonus Contact details up to : 4</li> <li>Area Master Assistance : Yes</li> <li>Contact details through sms : Yes</li> </ul> </div> </div> </div> <div class="col-md-4 col-sm-12 col-xs-12"> <div class="pricing-table"> <div class="pricing-header"> <p class="pricing-title myTitle">Free Plan </p> <p class="pricing-rate">₹ 0 <br><span>Including All Tax</span> </p> <a class="btn btn-custom payNow">Free Plan</a> </div> <div class="pricing-list"> <ul> <li>Contacts details up to : 5</li> <li>Bonus Contact details up to : 00</li> <li>Area Master Assistance : No</li> <li>Contact details through sms : Yes</li> </ul> </div> </div> </div> </div> </div> </section> 

Answer 3

试试这个我已经编辑了由于CSS的jquery函数UI问题

 $(function() { $(".payNow").on("click", function(e) { var $list = $(this).closest(".pricing-table"); name = $list.find(".myTitle").text(); name += $($list.find("li")[1]).text(); console.log(name); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <section id="pricing-table"> <div class="row pricelistNew"> <div class="pricing"> <div class="col-md-4 col-sm-12 col-xs-12"> <div class="pricing-table"> <div class="pricing-header"> <p class="pricing-title myTitle">Easy Plan </p> <p class="pricing-rate">₹ 1000 <br><span>Including All Tax</span></p> <a class="btn btn-custom payNow">Easy Plan</a> </div> <div class="pricing-list"> <ul> <li>Contacts details up to : 25</li> <li>Bonus Contact details up to : 2</li> <li>Area Master Assistance : No</li> <li>Contact details through sms : Yes</li> </ul> </div> </div> </div> <div class="col-md-4 col-sm-12 col-xs-12"> <div class="pricing-table"> <div class="pricing-header"> <p class="pricing-title myTitle">Cool Plan </p> <p class="pricing-rate">₹ 2000 <br><span>Including All Tax</span></p> <a class="btn btn-custom payNow">Cool Plan</a> </div> <div class="pricing-list"> <ul> <li>Contacts details up to : 48</li> <li>Bonus Contact details up to : 4</li> <li>Area Master Assistance : Yes</li> <li>Contact details through sms : Yes</li> </ul> </div> </div> </div> <div class="col-md-4 col-sm-12 col-xs-12"> <div class="pricing-table"> <div class="pricing-header"> <p class="pricing-title myTitle">Free Plan </p> <p class="pricing-rate">₹ 0 <br><span>Including All Tax</span></p> <a class="btn btn-custom payNow">Free Plan</a> </div> <div class="pricing-list"> <ul> <li>Contacts details up to : 5</li> <li>Bonus Contact details up to : 00</li> <li>Area Master Assistance : No</li> <li>Contact details through sms : Yes</li> </ul> </div> </div> </div> </div> </div> </section>