获取给定 DIV 中 Class 的 InnerHTML答案

【问题标题】：Get InnerHTML of Class within a Given DIV获取给定 DIV 中 Class 的 InnerHTML
【发布时间】：2014-09-24 22:35:41
【问题描述】：

需要从名为“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>

【问题讨论】：

您没有具有id 或class 的'main' 的元素。你期望它匹配什么，准确地说？
现在用 DIV ID 更新代码
谢谢你，现在：“[不能使用]这个，因为页面上有多个.one_price类[元素]”。您能否提供更具包容性的 DOM 摘录？向我们展示它的样子？你想得到什么具体的结果？
我到底为什么要关注一个模糊的 URL？您可以在 cmets 中玩 600 个角色：随意使用它们，它们是免费的！并且你需要将该页面的HTML缩减为Minimal, Complete, Verified Excample code并将该代码发布到here，否则这个问题以后对其他人毫无用处。
var price = $('#main').find('.one_price').text();工作我搞砸了console.log。感谢您的帮助

标签： jquery innerhtml

【解决方案1】：

假设您发布的 HTML 包含在 <div> 中，并带有 'main' 的 id，那么以下将工作（在大多数浏览器中，尽管仅在 Chrome 37/Windows 8.1 中进行了测试）：

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

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

console.log(price);

<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>

这只有有效，因为带有id 的元素会自动（对于旧版，我相信 IE，兼容性），其中它被认为是一种便利。但是，不建议这样做，应该这样做：

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

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

console.log(price);

<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>

【讨论】：

var price = $(main).find('.one_price').text() 在页面上返回未定义
它也应该（虽然，如前所述，它适用于我使用 Chrome），它是一个遗留的“功能”，允许意外中断。现在，正确使用它，$('#main').find('.one_price').text() 会给你什么？
@Stephan：谢谢！但请注意，这是一个可怕的、horrible 的“功能”（注意吓人的引号），并且任何自动（和 global）变量都可以非常非常容易地被覆盖.
$('#main').find('.one_price').text() 也未定义
那么你的页面有问题，你没有费心去沟通，或者你的 HTML 不能充分代表你的实际 HTML/DOM。

【解决方案2】：

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

看这个例子：

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

<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>

【讨论】：

我看到您编辑了您的示例以包含 id="main"，我将更新我的选择器，尽管答案的要点保持不变。
不能使用这个，因为页面上有多个“one_price”类

【解决方案3】：

如果您只想查看一个结果，则必须向 html 添加更多选择器（添加更多“id-class”）到 html。如果还有的话，你能解释一下你到底想要什么吗？

【讨论】：