<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <style> .list-group { margin:0 auto; width:960px; list-style-type: none; } .badge { background: #09d3ac; border-radius: 50%; padding: 10px 10px; font-size: 14px; color: white; text-transform: uppercase; } </style> <body> <ul class="list-group"> <li class="list-group-item"> <span class="badge">1</span> <span class="badge">2</span> <span class="badge">3</span> <span class="badge">4</span> <span class="badge">5</span> <span class="badge">6</span> <span class="badge">7</span> <span class="badge">8</span> <span class="badge">9</span> <span class="badge">10</span> </li> </ul> <script> $('.list-group .badge').each(function() { var that = $(this); if (that.text() == 1) { that.addClass('label-warning'); } else if (that.text() == 2) { that.addClass('label-info'); } else if (that.text() == 3) { that.addClass('label-default'); } else if (that.text() == 4) { that.addClass('label-danger'); } else if (that.text() == 5) { that.addClass('label-primary'); } else if (that.text() == 6) { that.addClass('label-success'); } else if (that.text() == 7) { that.addClass('label-primary'); } else if (that.text() == 8) { that.addClass('label-danger'); } else if (that.text() == 9) { that.addClass('label-warning'); }; </script> </body> </html> null fix-invalid-code