Question

我试图在Chrome控制台中使用jquery获取div值：

<div class="col-md-3">
  <div class="vou-col" style="cursor: pointer">
    <h4>Free Large Bucket</h4>
    <span class="sku-info">Voucher123</span>
  </div>
</div>

我收到以下错误：

$（ 'SKU-信息'）。VAL（）

VM783：1

未捕获的TypeError：$（...）。val不是函数 at：1：21

Answer 1

问题

.val()用于获取输入元素的值 - 即用户在文本框中输入的内容。它不会用于此目的。

但是，它应该仍然被定义，即使在HTML元素上调用（它仍然会返回null，所以你仍然会遇到问题）。 .val() 不是函数的唯一原因是如果你没有包含jQuery - 确保你有一行像

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

在您网页的<head>部分中包含jQuery，否则下面的解决方案都不会有效。

解决方案

您希望获得<div>的内部HTML值。因此，您应该使用.text()或.html()代替.val()。

.text()将返回<div>中的文字，不带任何HTML标记;
.html()将返回<div>的所有内容，包括其中的所有HTML标记。

实施例

console.log($(".sku-info").text())

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col-md-3">
    <div class="vou-col" style="cursor: pointer">
        <h4>Free Large Bucket</h4>
        <span class="sku-info">Voucher123</span>
    </div>
</div>

Answer 2

您可以使用.text()/.html()代替.val()来查看此更新代码段。

console.log($('.sku-info').html());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3">
<div class="vou-col" style="cursor: pointer">
    <h4>Free Large Bucket</h4>
    <span class="sku-info">Voucher123</span>
</div>
</div>

Answer 3

<强>问题

您的jQuery似乎在没有冲突模式下运行 - 因此$是浏览器控制台的本机功能。如果使用与CMS捆绑在一起的jQuery版本（例如WordPress或Drupal），通常会出现这种情况。

<强>解决方案

您可以使用完整版：

jQuery(".sku-value").text();

我们可以推断出这种情况，因为错误是“.val（...）不是函数” - 如果它是jQuery，那么.val 将成为一个函数。

有用的调试提示

您可以通过查看是否有版本号

来查看$是否为jQuery

console.log($.fn.jquery)

如果$是jQuery，那么这将记录版本号 - 类似于“2.1.1”。如果$ jQuery不是jQuery，它将记录未定义。

Answer 4

包括jquery

＆＃13;

var spanval = $('.sku-info').html();
alert(spanval);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3">
   <div class="vou-col" style="cursor: pointer">
       <h4>Free Large Bucket</h4>
        <span class="sku-info">Voucher123</span>
     </div>
 </div>

＆＃13;

Answer 5

$(".sku-info").attr('value')

应该做到这一点，因为此控件不是输入；）

如何使用jquery获取div值？

5 个答案:

问题

解决方案

实施例