Упростить селектор с пронумерованными идентификаторами

Question

У меня есть серия div на той же странице, для которой я добавил функцию щелчка, которая действует как тег <a>, направляя пользователя URL-адресу, извлеченному из пользовательского атрибута данных. Мой HTML выглядит следующим образом:

<div id="my-button1" class="button-style-1" data-href="http://www.stackoverflow.com"> 
    Button 
</div> 

<div id="my-button2" class="button-style-1" data-href="http://www.w3schools.com"> 
    Button 2 
</div> 

и JQuery:

$('#my-button1,#my-button2').click(function() { 
    var dataURL = $(this).data('href'); 
    window.open(dataURL, '_blank'); 
    }); 

Мой вопрос заключается в следующем, можно ли упростить селектор что-то вроде:

$('#my-button[i]') 

таким образом, что это будет быть намного более компактным в том случае, если у меня есть многие из этих div, содержащихся на одной странице? Если это возможно, как мне добиться этого эффекта?

Answer 1

Вы можете использовать $('div[data-href]'), которые будут применяться к любому DIV с атрибутом data-href.

Ваш пример с обновлением: https://jsfiddle.net/fLj7y0kz/1/

Типичным способом я сделал это, и видел, как это делается как @arop предлагает и использовать специальный класс для этих элементов и использовать селектор класса $('div.myclass) `.

Answer 2

Почему бы не использовать класс на каждой кнопке? то просто выберите класс

$('.my-buttons').click(...) 

Answer 3

Свойство nth-child() можно использовать для получения элемента по индексу. Посмотрите приведенный ниже пример кода $ ('# my-button: nth-child (1)'). Click (function() {})

Answer 4

Созданы динамические div с идентификаторами из цикла. Упование это полезно для вы

var mybutton = []; 
var url = ["http://www.stackoverflow.com", 
      "http://www.w3schools.com", 
      "http://www.w3schools.com/jquery", 
      "http://www.w3schools.com/css"]; 

for (i = 0; i < 4; i++) { 
    //alert("hi"); 
    $("body").append("<div class='button-style-1' 
    id='mybutton[" + [i] +"]' data-href=" + url[i] + ">Button</div>") 

} 

codepen - http://codepen.io/nagasai/pen/xOVERN