在Jquery中分配类的所有元素唯一ID

Question

So I have a group of labels that all belong to the "btn btn-warning" bootstrap class:

<div class = "btn-group" data-toggle = "buttons">
  <label class="btn btn-warning active">
    <input type="radio" checked>QA 71</input>
  </label>
  <label class="btn btn-warning">
    <input type="radio">QA 72</input>
  </label>
  <label class="btn btn-warning">
    <input type="radio">QA 73</input>
  </label>
  <label class="btn btn-warning">
    <input type="radio">QA 74</input>
  </label>
  <label class="btn btn-warning">
    <input type="radio">ST 71</input>
  </label>
  <label class="btn btn-warning">
    <input type="radio">PR/Beta</input>
  </label>
</div>

I would like to assign IDs to all of them, with the one labeled QA 71 as environment1 , the next one as environment2 , etc. Here is my jquery function:

var count = 1;
var btnid = "";
$(document).ready(function(){
  $("label .btn-warning").each(
    function(){                     
      btnid = "environment"+count;
      $(this).attr("id", btnid);
      count++;
    });
});

However, this is not working. What am I doing wrong?

Answer 1

The reason it doesn't work, is because the selector is wrong, a label with a class is denoted as label.classname

jQuery's each() also already has a count in the first argument, use that

$(document).ready(function(){
    $("label.btn-warning").each(function(index, elem){                     
        elem.id = "environment" + (index + 1); // zero based
    });
});

You could even use attr() with a callback

$(document).ready(function(){
    $("label.btn-warning").attr('id', function(index){                     
        return "environment" + (index + 1); // zero based
    });
});

Answer 2

There is a space between label and btn-warning which mean it will try to look for a class inside label, which is not the case .

$("label.btn-warning")

JSFIDDLE