基於字符串

的教育計劃我的工作只選一個div包含課程，以及每門課程至少有一個類別和課程編號。聽起來理論上很簡單，但是當程序最初編寫時，課程不應該有多個類別。結果是，主頁顯示了多次列出的完全相同的課程，只使用不同的類別標籤（僅在HTML中可見）。這令用戶感到困惑。我想用jQuery來「隱藏」所有其他div，而不是重寫整個結構，這需要我很多天（我是一個非常新鮮的開發人員），而不是重新編寫整個結構。基於字符串

HTML佈局示例：

<div id="cat_2_10" class="occurenceItem occurence_2" style="display: block;"></div> <div id="cat_3_10" class="occurenceItem occurence_3" style="display: block;"></div> <div id="cat_6_10" class="occurenceItem occurence_6" style="display: block;"></div>

在這個例子中，有相同的過程（當然號10）的3個OCCURENCES，在類別2,3和6。這些3周的div包含鏈接到完全相同的課程，所以沒有意義顯示全部3.

有沒有一種方法可以使用jQuery選擇器來確保每個課程只有一個可見？請記住，該類別無關緊要。每個'_'後跟一個課程編號只需要是唯一的。一旦採取，其他人應該有style =「display：none」。

來源

2016-03-02 NorseCode

我相信這會做你想要什麼：

var courses = []; 
 
$('.occurenceItem').filter(function() { 
 
    if ($.inArray(this.id.split('_').pop(), courses) === -1) { 
 
     courses.push(this.id.split('_').pop()); 
 
    } else {return this} 
 
}).hide()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="cat_2_10" class="occurenceItem occurence_2" style="display: block;">cat_2_10</div> 
 
<div id="cat_3_10" class="occurenceItem occurence_3" style="display: block;">cat_3_10</div> 
 
<div id="cat_6_10" class="occurenceItem occurence_6" style="display: block;">cat_6_10</div> 
 

 

 
<div id="cat_7_4" class="occurenceItem occurence_2" style="display: block;">cat_7_4</div> 
 
<div id="cat_8_4" class="occurenceItem occurence_3" style="display: block;">cat_8_4</div> 
 
<div id="cat_9_4" class="occurenceItem occurence_6" style="display: block;">cat_9_4</div>

來源

2016-03-02 14:45:32 j08691

謝謝，這個作品完美！ – NorseCode

這可能會實現：

var ids = []; 
$('.occurenceItem').each(function() { 
    var id = $(this).attr('id').split('_').pop(); 
    if (ids.indexOf(id) < 0) { 
     $(this).show(); 
     ids.push(id); 
    } else { 
     $(this).hide(); 
    } 
});

來源

2016-03-02 14:46:33

這似乎是工作。

for (var i = 0; i < 20; i++) { 
    $("[id^=cat_][id$=_" + i + "]").hide().first().show(); 
} 

//[id^=cat_] -> id begins with cat_ 
//[id$=_ + i] -> id ends with _i

注意，在這裏，我假設課程ID的範圍從0到20，我不知道有多少課程，但我想在做一個簡單的循環就足夠有效和簡單。

如果你不想循環'不存在的課程'，你將不得不建立一個課程id的數組，然後循環它們。

jsFiddle

來源

2016-03-02 14:55:53 phenxd

回答

相關問題