Question

我有这个元素：

<div class="item item-id-123"></div>

我想通过类名item-id-123将ID放在变量中。

所以我通过.item：

定位元素

$( document ).on( 'click', '.item', function() {
    // get the ID via class name
});

也许我可以使用.match()获取类名，然后从中删除item-id-，以便我们123离开...？这里有什么合适的方法？

Answer 1

如果您不确定属性中class的位置，可以使用RegEx item-id-(\d+)

$(document).on('click', '.item', function() {
  console.log(/item-id-(\d+)/.exec($(this).attr('class'))[1]);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item item-id-123">Click me</div>

Answer 2

假设样本item item-id-123，您可以使用正则表达式拆分类名并获取数字部分。

这种方法在找到匹配时会中断循环。

＆＃13;

$(document).on('click', '.item', function() {
  var names = $(this).attr('class').split(/\s+/);
  var id;
  for (var name of names) {
    var aux;
    if ((aux = name.replace(/[^\d]+/, '').trim()) !== '') {
      id = aux;
      break;
    }
  }
  console.log(id);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item item-id-123">Click me!</div>

＆＃13;

或者，更简单的是，获取与id-number相关的捕获组：

＆＃13;

$(document).on('click', '.item', function() {
  var id = $(this).attr('class').match(/id-(\d+)/).pop();
  console.log(id);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item item-id-123 another-class-567">Click me!</div>

＆＃13;

Answer 3

这可以替代@ Zenoo的答案，只是没有正则表达式。

$(document).on('click', '.item', function() {
  console.log($(this).attr('class').split("item-id-")[1].split(" ")[0]);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item something here item-id-123 hHmmMM hey">Click me</div>

Answer 4

如果你的结构总是：

<div class="item item-id-123"></div>

如果你不是正则表达式，你可以试试这个：

$( '.item' ).on( 'click', function() {
   // get the ID via class name
   var id = $(this).attr('class').split('item-id-')[1];
   $('#result').text(id)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="item item-id-123">click me</span>
<div id="result"></div>

Answer 5

带有数字的ID，例如

＆＃13;

$( document ).on( 'click', '.item', function() {
    console.log($(this).attr("class").match(/\d+/)[0]);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item item-id-123">click</div>

＆＃13;

通过班级名称获取ID

5 个答案: