在元素中查找类名的其他属性

Question

我有以下代码:

<div class="_GAb-_GAd">
    <div class="_GANmb _GAe ACTION-removeFilter TARGET-1">clear</div>
</div>

<div class="_GAb-_GAd">
    <div class="_GANmb _GAe ACTION-removeFilter TARGET-2">clear</div>
</div>

和脚本(Jquery)

<script>
    $(document).ready(function() {
        $(".ACTION-removeFilter").click(function() {
            alert('find out which TARGET is being clicked.');
        });
    });
</script>

我想知道点击了哪个TARGET(TARGET-1或TARGET-2).有没有办法找出来？

我怎么知道呢？

Answer 1

您可以regex在className上使用

var target = $(this).attr('class').match(/\b(TARGET-[^ ]+)/)[1];

正则表达式演示和解释

1. \b:单词边界
2. ():捕获组.可以使用数组的第二个索引(1)访问
3. TARGET-:按TARGET-字面意思匹配
4. [^ ]*:^:不.匹配任何非空间,零次或多次的东西.

注意:要匹配不区分大小写,请使用iflag.我以为在-使用之后总会有东西+.

演示:

$(document).ready(function() {
  $(".ACTION-removeFilter").click(function() {
    console.log($(this).attr('class').match(/\b(TARGET-[^ ]+)/)[1]);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="_GAb-_GAd">
  <div class="_GANmb _GAe ACTION-removeFilter TARGET-1">clear</div>
</div>

<div class="_GAb-_GAd">
  <div class="_GANmb _GAe ACTION-removeFilter TARGET-2">clear</div>
</div>

<div class="_GAb-_GAd">
  <div class="_GANmb _GAe ACTION-removeFilter TARGET-My_Beautiful_class_488">Check this</div>
</div>