Question

我正在开展的教育计划包含课程，每门课程至少有一个类别和一个课程编号。理论上听起来很简单，但是当程序最初编写时，课程不可能有多个类别。结果是主页显示了几次完全相同的课程，只有不同的类别标签（仅在HTML中看到）。这让用户感到困惑。

而不是重写整个结构，这将需要我很多天（我是一个非常新鲜的开发人员），我想使用jQuery来隐藏＆＃34;所有其他的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>

在这个例子中，在类别2,3和6中有3个相同课程（课程编号10）的出现。这3个div包含指向完全相同课程的链接，因此没有必要显示所有3。

有没有办法可以使用jQuery选择器来确保每个课程中只有一个可见？请记住，该类别无关紧要。每一个＆＃39; _＆＃39;接下来的课程编号只需要是独一无二的。一个人被采取，其他人应该有风格=＆＃34;显示：无＆＃34;。

Answer 1

我相信这会做你想要的：

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>

Answer 2

这可能有效：

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();
    }
});

Answer 3

这似乎有效。

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

根据字符串

3 个答案: