jQuery获取以开头的类答案

【问题标题】：jQuery get class that starts withjQuery获取以开头的类
【发布时间】：2018-02-09 03:48:38
【问题描述】：

我有以下 HTML

<button class="c1 c2 user-1"></button>
<button class="c1 c2 user-2"></button>
<button class="c1 c2 user-3"></button>

我知道点击了哪个按钮，如何从中获取user-# 类？

【问题讨论】：

@guradio 获取元素，而不是类名
课程会被打乱吗？您可以使用空格将 attr 类拆分，然后弹出获取您想要的类的最后一个元素
使用 $('button').click(function(){ $(this).attr('class'); });

标签： jquery html css jquery-selectors

【解决方案1】：

您可以获取被点击的class 属性并使用如下正则表达式：

.replace(/.*(user-\d+).*/g,'$1')

要从中获取 user-# - 请参阅下面的演示：

$('button').click(function(){
  console.log($(this).attr('class').replace(/.*(user-\d+).*/g,'$1'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="c1 c2 user-1">one</button>
<button class="c1 c2 user-2">two</button>
<button class="c1 c2 user-3">three</button>
<button class="user-45 c1 c2">four</button>

【讨论】：

【解决方案2】：

给你一个解决方案

$('button').click(function(){
  var allClass = $(this).attr('class').split(' ');
  console.log(allClass[allClass.length - 1]);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="c1 c2 user-1"></button>
<button class="c1 c2 user-2"></button>
<button class="c1 c2 user-3"></button>

使用.attr('class');获取点击按钮的所有类。然后按空间拆分，从数组中取出最后一个元素。

希望这会对你有所帮助。

【讨论】：

【解决方案3】：

假设类将像 OP 中的那样

你可以让 attr 类使用空格分割它，然后弹出你想要的类的最后一个元素

$("button").click(function() {

  var thisclass = $(this).attr("class")

  alert(thisclass.split(" ").pop())

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="c1 c2 user-1">1</button>
<button class="c1 c2 user-2">2</button>
<button class="c1 c2 user-3">3</button>

【讨论】：

请注意，如果 OP 向元素添加另一个类而不记得 JS 与元素密切相关，这将很容易被破坏。

【解决方案4】：

这应该可行：

function getUser(list) {
  
  return list
    .reduce((res, classname) => {
      const re = /user-(\w+)$/;
      const user = re.exec(classname);
      if(user) {
        res.push(user[1]);
      }
      
      return res;
    }, [])
  ;
}

function onButtonsClick(event) {
  const classes = Array.from(event.target.classList);
  
  console.log(getUser(classes));
}

Array
  .prototype
  .forEach
  .call(document.querySelectorAll('button'), element => {
    element.addEventListener('click', onButtonsClick);
  })
;

<button class="c1 c2 user-1">User 1</button>
<button class="c1 c2 user-2">User 2</button>
<button class="c1 c2 user-3">User 3</button>

【讨论】：

【解决方案5】：

一种方法是使用正则表达式来分离class 属性值，如下所示：

$('button').click(function() {
  var classes = $(this).attr('class');
  var userClass = classes.match(/user\-\d+/gi)[0];
  console.log(userClass);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="c1 c2 user-1"></button>
<button class="c1 c2 user-2"></button>
<button class="c1 c2 user-3"></button>
<button class="c1 c2 user-111 foo1"></button>

然而，更可扩展、更灵活和更可靠的解决方案是将user-X 值存储在元素的data 属性中：

$('button').click(function() {
  var user = $(this).data('user');
  console.log(user);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="c1 c2" data-user="user-1"></button>
<button class="c1 c2" data-user="user-2"></button>
<button class="c1 c2" data-user="user-3"></button>

【讨论】：