基于字符串

的教育计划我的工作只选一个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

回答

相关问题