CODEWITHSUNDEEP
jqueryhtmlcssjquery-selectors
TheRealPapa
TheRealPapa

Reputation: 4539

jQuery get class that starts with

I have the following HTML

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

I know which button was clicked, how do I get the user-# class from it?

Upvotes: 3

Views: 2158

Answers (5)

kukkuz
kukkuz

Reputation: 42352

You can get the class attribute which was clicked and use a regex like:

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

to get the user-# out of it - see demo below:

$('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>

Upvotes: 1

Shiladitya
Shiladitya

Reputation: 12181

Here you go with a solution 

$('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>

Get all the classs of the clicked button using .attr('class');. Then split it on the basis of space and get the last element from array.

Hope this will help you.

Upvotes: 0

guradio
guradio

Reputation: 15555

Assuming class will be like that in OP

you can get the attr class split it using space then pop getting the last element which the class you want

$("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>

Upvotes: 1

Hitmands
Hitmands

Reputation: 14159

this should work:

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>

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

One method would be to use a Regular expression to pull apart the class attribute value, something like this:

$('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>

However a more extensible, flexible and reliable solution would be to store the user-X value in a data attribute on the element:

$('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>

Upvotes: 4

Related Questions