Question

需要在名为“Main”的DIV中获取名为“one_price”的类中的数据

在下面的HTML中，我需要从代码中返回（£2.50）

我已经尝试了$（'main'）。find（'。one_price'）但似乎无法从这种方法中获得类中的任何想法

<div id="main">         
<div class="product-column one-column right_col">
<div class="product-box">
<div class="product-box-section">
<span class="product_price">
<span class="product_price_values">
<span class="price_title one_price_title">Price: </span>
<span class="one_price">&pound;2.50</span>

                        <span id="product_rrp">
                            Was <span class="strikethrough">&pound;7.00</span>
                        </span>
                    </span>
                    <span id="product_saving">
                            <span id="you_save">
                                <em class="hd">Save</em>
                                <em class="percentage val">64&#37;</em>
                                <em class="currency val">&pound;4.50</em>
                            </span>
                        </span>
                    </span>
</div>

Answer 1

假设您发布的HTML包含在<div>中，其中id为＆＃39;主要＆＃39;然后以下将工作（在大多数浏览器中，但仅在Chrome 37 / Windows 8.1中测试过）：

var price = $(main).find('.one_price').text();
console.log(price);

＆＃13;

var price = $(main).find('.one_price').text();

console.log(price);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
  <div class="product-column one-column right_col">
    <div class="product-box">
      <div class="product-box-section">
        <span class="product_price">
<span class="product_price_values">
<span class="price_title one_price_title">Price: </span>
        <span class="one_price">&pound;2.50</span>

        <span id="product_rrp">
                            Was <span class="strikethrough">&pound;7.00</span>
        </span>
        </span>
        <span id="product_saving">
                            <span id="you_save">
                                <em class="hd">Save</em>
                                <em class="percentage val">64&#37;</em>
                                <em class="currency val">&pound;4.50</em>
                            </span>
        </span>
        </span>
      </div>
    </div>

＆＃13;

这仅适用于，因为具有id的元素是自动的（对于遗产，我相信IE，兼容性），其中它被认为是方便的。但是，这不是，应该是：

var price = $('#main').find('.one_price').text();
console.log(price);

＆＃13;

var price = $('#main').find('.one_price').text();

console.log(price);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
  <div class="product-column one-column right_col">
    <div class="product-box">
      <div class="product-box-section">
        <span class="product_price">
<span class="product_price_values">
<span class="price_title one_price_title">Price: </span>
        <span class="one_price">&pound;2.50</span>

        <span id="product_rrp">
                            Was <span class="strikethrough">&pound;7.00</span>
        </span>
        </span>
        <span id="product_saving">
                            <span id="you_save">
                                <em class="hd">Save</em>
                                <em class="percentage val">64&#37;</em>
                                <em class="currency val">&pound;4.50</em>
                            </span>
        </span>
        </span>
      </div>
    </div>

＆＃13;

Answer 2

您应该使用$(yourSelector).text();来选择元素的文本内容。此外，您不需要find()，您可以像在CSS中那样将选择器串起来：

见这个例子：

＆＃13;

alert( $('#main .one_price').text() );

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
    <div class="product-box-section">
        <span class="product_price">
            <span class="product_price_values">
                <span class="price_title one_price_title">Price: </span>
                <span class="one_price">&pound;2.50</span>

                <span id="product_rrp">
                Was <span class="strikethrough">&pound;7.00</span>
                </span>
            </span>
            <span id="product_saving">
                <span id="you_save">
                    <em class="hd">Save</em>
                    <em class="percentage val">64&#37;</em>
                    <em class="currency val">&pound;4.50</em>
                </span>
            </span>
        </span>
    </div>
</div>

＆＃13;

Answer 3

如果您只想查看一个结果，则必须在html中添加更多选择器（添加更多＆＃34; id-class＆＃34; s）到html。如果你还能解释你想要的东西吗？

在给定的DIV中获取Class的InnerHTML

3 个答案: