Multiple buttons selection by names in JQuery

Question

I tried using the following code:

$('button[name^="X,Y,Z"]').on("click",function(){
    // code here
});

to replace this code but it didn't work. Anybody has a work around to make it shorter :) without using class or ids

$('button[name^="X"],button[name^="Y"],button[name^="Z"]').on("click",function(){
    // code here
});

showdev · Answer 1 · 2020-03-26T00:47:46.937

I'm not aware of a more compact format for that selector, but you could create a function that generates a selector string from a comma separated string.

const btnNameBegins = function(values) {
  return values.split(',').map(value => 'button[name^="' + value + '"]').join(',')
}

$(btnNameBegins('X,Y,Z')).on("click", function() {
  console.log(this.name);
}).addClass('hilite');

// output the selector string for demonstration
console.log(btnNameBegins('X,Y,Z'));

.hilite {
  outline: 1px solid blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button name="Wstuff">W</button>
<button name="Xstuff">X</button>
<button name="Ystuff">Y</button>
<button name="Zstuff">Z</button>
<button name="4stuff">4</button>

Another idea is to remove the element type from the function and filter a selection of <button> elements. That way, you could use the function more generally to filter any other selector.

const nameBegins = function(values) {
  return values.split(',').map(value => '[name^="' + value + '"]').join(',')
}

$('button').filter(nameBegins('X,Y,Z')).on("click", function() {
  console.log('Button: ' + this.innerHTML);
}).addClass('hilite');

$('.active').filter(nameBegins('B,C,D')).on("click", function() {
  console.log('Checkbox: ' + this.value);
}).addClass('hilite');

// output the selector string for demonstration
console.log(nameBegins('X,Y,Z'));

.hilite {
  outline: 1px solid blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button name="Wstuff">W</button>
<button name="Xstuff">X</button>
<button name="Ystuff">Y</button>
<button name="Zstuff">Z</button>
<button name="4stuff">4</button>

<input type="checkbox" name="Astuff" value="A">
<input type="checkbox" name="Bstuff" value="B" class="active">
<input type="checkbox" name="Cstuff" value="C">
<input type="checkbox" name="Dstuff" value="D">
<input type="checkbox" name="Estuff" value="E" class="active">

Also see Regex in Jquery Selectors.

Multiple buttons selection by names in JQuery

1 Answers1