Question

在有两个类的div中，第一个内部div

<div class="datacheck">
   <div class="classic_div_data customdataid_305">
     some values come here
   </div>
   <div class="optiondiv">
   </div>
</div>

我需要从第一个内部div的第二个类（customdataid_305）获取一个子字符串（此处为数字305）。为此需要获得课程。

我在jquery中写道并成功

var xyz= $($(".datacheck").find("div")[0]).attr("class").split(" ")[1]

我从中获得了课程。

有没有更简单的方法。我正在寻找类似这样的东西$(element).class()可能会返回一个类数组

Answer 1

虽然原生DOM classList已接近，但没有任何内容可以为您提供数组类。但我不认为classList会使事情变得更简单。

我这样做：

var xyz = $(".datacheck .classic_div_data").attr("class").match(/\bcustomdataid_(\d+)\b/);
xyz = xyz && xyz[1];

正则表达式提取类的数字部分，而不是脆弱的（例如，对类是列表中的第一个还是第二个敏感）。

示例：

＆＃13;

var xyz = $(".datacheck .classic_div_data").attr("class").match(/\bcustomdataid_(\d+)\b/);
xyz = xyz && xyz[1];
console.log("xyz = '" + xyz + "'");

＆＃13;

<div class="datacheck">
   <div class="classic_div_data customdataid_305">
     some values come here
   </div>
   <div class="optiondiv">
   </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

＆＃13;

但是，如果您可以更改HTML，我根本不会使用这个类，我会改为使用data-*属性：

<div class="classic_div_data" data-custom-id="305">

然后

var xyz = $(".datacheck [data-custom-id]").attr("data-custom-id");

示例：

＆＃13;

var xyz = $(".datacheck [data-custom-id]").attr("data-custom-id"); 
console.log("xyz = '" + xyz + "'");

＆＃13;

<div class="datacheck">
   <div class="classic_div_data" data-custom-id="305">
     some values come here
   </div>
   <div class="optiondiv">
   </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

＆＃13;

Answer 2

您当前设计遇到的一个主要问题是，如果类的顺序发生变化，或者有人添加了另一个类，那么您的逻辑就会中断。您还从jQuery对象获取DOMElement，然后再次返回到jQuery对象。

使用data-*属性存储自定义数据会更好一些，如下所示：

$('.classic_div_data').click(function() {
  console.log($(this).data('customdataid'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="datacheck">
  <div class="classic_div_data" data-customdataid="305">
    some values come here
  </div>
  <div class="optiondiv"></div>
</div>
<div class="datacheck">
  <div class="classic_div_data" data-customdataid="205">
    some more values come here
  </div>
  <div class="optiondiv"></div>
</div>

Answer 3

您可以从classList元素对象

轻松获取第n个类

var x = $(".datacheck").find("div").get(0);
var nthClass = x.classList[1]
var res = nthClass.replace("customdataid_", "");
console.log(res); //305

Answer 4

您可以在.match()中使用正则表达式来查找课程中的最后一位数。

＆＃13;

var digit = $(".datacheck > :first").attr("class").match(/[\d]+$/g)[0];
console.log(digit);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="datacheck">
    <div class="classic_div_data customdataid_305">some values come here</div>
    <div class="optiondiv"></div>
</div>

＆＃13;

在jquery

4 个答案: