jQuery的篩選出雙類名和各個功能

Question

下面是示例代碼

HTML

<div class="class-name-1"></div> 
<div class="class-name-1"></div> 

<div class="class-name-2"></div> 
<div class="class-name-2"></div> 

... 

<div class="class-name-30"></div> 
<div class="class-name-30"></div> 

jQuery的

$('class^=class-name-').each(function() { 
    console.log($(this)); 

    fn_myFunction(); 
}); 

該腳本將運行六十次fn_myFunction()，我想每class^=class-name-只運行fn_myFunction()，這意味着使上面的腳本運行fn_myFunction()總共30次。

返回第一個或最後一個元素也可以。

如果可能，我想保留jQuery選擇器$('class^=class-name-')。

我該如何做到這一點與jQuery的？

謝謝。

Answer 1

你可以建立獨特的類的數組，然後相應地使用.filter() method過濾元件給出html。

在下面的例子中，$uniqueElements是一個表示過濾元素的jQuery對象。

var uniqueClasses = []; 
 
var $uniqueElements = $('[class*=class-name-]').filter(function() { 
 
    var classes = $(this).attr('class').match(/class-name-\d+/)[0]; 
 
    return uniqueClasses.indexOf(classes) === -1 ? uniqueClasses.push(classes) : 0; 
 
}); 
 

 
$uniqueElements.css('background-color', '#f00');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="first-class class-name-1 other-class">class-name-1</div> 
 
<div class="first-class class-name-1 other-class">class-name-1</div> 
 

 
<div class="class-name-2">class-name-2</div> 
 
<div class="class-name-2">class-name-2</div>

然後你就可以在$uniqueElements遍歷每個元素並調用你的函數：

var uniqueClasses = []; 
 
var $uniqueElements = $('[class*=class-name-]').filter(function() { 
 
    var classes = $(this).attr('class').match(/class-name-\d+/)[0]; 
 
    return uniqueClasses.indexOf(classes) === -1 ? uniqueClasses.push(classes) : 0; 
 
}); 
 

 
$uniqueElements.each(fn_myFunction); 
 

 
function fn_myFunction() { 
 
    $(this).css('background-color', '#f00'); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="first-class class-name-1 other-class">class-name-1</div> 
 
<div class="first-class class-name-1 other-class">class-name-1</div> 
 

 
<div class="class-name-2">class-name-2</div> 
 
<div class="class-name-2">class-name-2</div>

Answer 2

$('class^=class-name-')似乎不是一個有效的jQuery選擇器？

嘗試圍繞選擇器添加括號，使用next sibling選擇器來匹配元素具有相同元素的元素，該元素具有相同的className，這應該返回至多兩個元素;一個"class-name-1"，一個"class-name-2"，在問題

$("[class^=class-name-]").each(function() { 
 
    if ($("~ ." + this.className, this).length) { 
 
    // some function here 
 
    console.log(this) 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="class-name-1"></div> 
 
<div class="class-name-1"></div> 
 

 
<div class="class-name-2"></div> 
 
<div class="class-name-2"></div>

Answer 3

嘗試在你的div添加類面膜。

樣品：

<div class="class-name-1 mask"></div> 
 
<div class="class-name-1 mask"></div> 
 

 
<div class="class-name-2 mask"></div> 
 
<div class="class-name-2 mask"></div> 
 

 
... 
 

 
<div class="class-name-30 mask"></div> 
 
<div class="class-name-30 mask"></div>

現在，只是做一個jQuery到新類：

$('.mask').each(function() { 
 
    console.log($(this)); 
 

 
    fn_myFunction(); 
 
});