如何使用jQuery获取div值？
[英]How to get div value using jquery?
问题描述
I am trying to get div value using jquery in chrome console from this: 
我正在尝试从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>
I am getting the following error: 我收到以下错误：
$('.sku-info').val() $（ 'SKU-信息'）。VAL（）
VM783:1 VM783：1
Uncaught TypeError: $(...).val is not a function at :1:21
5 个解决方案
解决方案1
2 已采纳 2017-08-03 06:00:51
The Problems 问题所在
.val() is used to get the value of an input element - ie what the user has typed into a text box. .val()用于获取输入元素的值，即用户在文本框中键入的内容。 It won't work for this purpose. 为此，它将不起作用。
However, it should still be defined, even if called on an HTML element (it would still return null , though, so you would still have a problem). 但是，即使在HTML元素上调用它也应该定义它（尽管它仍将返回null ，所以您仍然会遇到问题）。 The only reason for .val() to be not a function would be if you had not included jQuery - insure that you have a line like .val() 不是函数的唯一原因是，如果您未包含jQuery，请确保您有如下一行：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
in the <head> section of your webpage to include jQuery, otherwise none of the solutions below will work either. 在网页的<head>部分中以包含jQuery，否则下面的任何一种解决方案都不起作用。
The Solution 解决方案
You want to get the internal HTML value of a <div> . 您要获取<div>的内部HTML值。 So, you should use .text() or .html() instead of .val() . 因此，您应该使用.text()或.html()而不是.val() 。
-
.text()will return the text in the<div>, without any HTML tags;.text()将返回<div>的文本，不带任何HTML标记； -
.html()will return all of the content of the<div>, including any HTML tags inside it..html()将返回<div>所有内容，包括其中的任何HTML标记。
Example 例
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>
解决方案2
0 2017-08-03 06:01:11
You can use .text()/.html() instead of .val() for this.. check updated snippet below. 您可以.val()使用.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>
解决方案3
0 2017-08-03 06:06:49
Problem 问题
It seems that your jQuery is running in no conflict mode - so $ is the browser console's native function. 看来您的jQuery在无冲突模式下运行-因此$是浏览器控制台的本机功能。 This is often the case if using a version of jQuery which comes bundled with a CMS such as WordPress or Drupal. 如果使用的是与CMS捆绑在一起的jQuery版本，例如WordPress或Drupal，则通常是这种情况。
Solution 解
You can use the full version: 您可以使用完整版本：
jQuery(".sku-value").text();
We can infer this is the case because the error is ".val(...) is not a function" - if it were jQuery then .val would be a function. 我们可以推断是这种情况，因为错误是“ .val（...）不是函数”-如果是jQuery，则.val 将是函数。
Useful debugging tip 有用的调试提示
You can check to see if $ is jQuery by seeing if it has a version number 您可以通过查看$是否为jQuery来查看它是否具有版本号
console.log($.fn.jquery)
If $ is jQuery then this will log a version number - something like "2.1.1". 如果$是jQuery，则它将记录版本号-类似于“ 2.1.1”。 If $ jQuery is not jQuery, it'll log undefined. 如果$ jQuery不是jQuery，它将记录未定义。
解决方案4
0 2017-08-03 06:08:08
include jquery 包括jQuery
var spanval = $('.sku-info').html(); alert(spanval);
<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>
解决方案5
0 2018-10-09 20:15:58
$(".sku-info").attr('value')
应该做到这一点，因为此控件不是输入;）
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.