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

时间:2017-11-16 09:23:25

标签: javascript jquery

这里我有一行,在那一行我有三个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);
  });
});

这里我得到的所有标题名称都是

  

轻松计划酷计划免费计划

3 个答案:

答案 0 :(得分:0)

用这个替换你的脚本..

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

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

答案 1 :(得分:0)

试试这个。

<button class="activeButton">Button 1</button>
<button class="activeButton">Button 2</button>
<button class="activeButton">Button 3</button>
<button class="activeButton">Button 4</button>
<button class="activeButton">Button 5</button>
<button class="activeButton">Button 6</button>
<button class="activeButton">Button 7</button>
<button class="activeButton">Button 8</button>
<button class="activeButton">Button 9</button>
<button class="activeButton">Button 10</button>
<button class="activeButton">Button 11</button>
<button class="activeButton">Button 12</button>

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

答案 2 :(得分:0)

试试这个我编辑了你的jquery函数UI问题,因为css

async = require('async');

function* generator(start) {
    for (var i = start; i < start + 100; ++i) {
        yield i;
    }
}

async.eachLimit(generator(17), 3, function(value) {
    console.log(value);
});
$(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);
  });
});