GET jQuery的類名稱以一些字母

Question

我有一個HTML這樣我需要得到的類名稱開頭，如「border_」

<div class="box selected border_red"></div> 

<div class="box selected border_blue"></div> 

<div class="box border_pink inactive"></div> 

<div class="box selected border_green"></div> 

<div class="box border_grey inactive"></div> 

jquery 

$('.box').each(function(){ 

}) 

出需要

border_red 

border_blue 

border_pink 

border_green 

border_grey 

Answer 1

收集放一些字母他們都過濾掉那些不匹配

var classes = []; 
$('.box').each(function() { 
    classes = classes 
     .concat(
      $(this).attr("class") 
       .split(' ') 
       .filter(function(cls) {cls.indexOf('border_') === 0}) 
     ); 
}) 

Answer 2

var check = "border_"; 
 
$('div.box[class*="border_"]').each(function() {  
 
     // Get array of class names 
 
     var cls = $(this).attr('class').split(' ');  
 
     for (var i = 0; i < cls.length; i++) { 
 
      // Iterate over the class and log it if it matches 
 
      if (cls[i].indexOf(check) > -1) {   
 
       console.log(cls[i].slice(0, cls[i].length)); 
 
      }  
 
     }  
 
    });

.box{ 
 
width:100px; 
 
height:100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box selected border_red"></div> 
 

 
<div class="box selected border_blue"></div> 
 

 
<div class="box border_pink inactive"></div> 
 

 
<div class="box selected border_green"></div> 
 

 
<div class="box border_grey inactive"></div>

這個問題的啓發：JQuery get the rest of the element's class name that starts with string 「whatever-」

Answer 3

如果你想一個相當簡單的版本，只需使用數組，地圖和一個漂亮的正則表達式試試這個;

var borders = 
    $(".box") 
    .toArray() 
    .map(function(el) { 
     return el.className.match(/\b(border_[a-z0-9]+)\b/gi)[0]; 
    }); 

// "borders" is an array 
console.log(borders); 

---

你也可以決定改變.map()到.each()然後做環內的一些jQuery的工作與el.className.match()結果:)

$(".box") 
    .each(function(key,el) { 
    $(el).text(el.className.match(/\b(border_[a-z0-9]+)\b/gi)[0]); 
    }); 

JSFiddle with results, here