alle Elemente einer Klasse eindeutigen IDs in JQuery zuweisen

Question

So habe ich eine Gruppe von Etiketten, die die „btn btn-Warnung“ Bootstrap-Klasse gehören alle zu:

<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> 

Ich mag würde IDs alle zuweisen sie, mit dem ein QA etikettiert 71 als environment1, die nächste wie environment2 usw. Hier ist meine jquery-Funktion:

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

dies ist jedoch nicht funktioniert. Was mache ich falsch?

Answer 1

Der Grund, es nicht funktioniert, weil die Wähler falsch ist, wird ein Etikett mit einer Klasse bezeichnet als label.classname

jQuery each() auch bereits eine Zählung im ersten Argument hat, verwenden Sie die

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

Sie sogar attr() mit einem Rückruf

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

Answer 2

Es gibt einen Raum zwischen label verwenden könnte ein d btn-warning was bedeutet, dass es versuchen wird, nach einer Klasse innerhalb des Labels zu suchen, was nicht der Fall ist.

$("label.btn-warning") 

JSFIDDLE