文章/答案/技术大牛

发布

社区首页 >问答首页 >针对生成类的第一个实例

问针对生成类的第一个实例
EN

Stack Overflow用户

提问于 2022-06-21 07:51:57

回答 3查看 20关注 0票数 0

我试图只使用css获得一个解决方案，但im开始认为它无法完成:按日期显示的事件列表，以及基于事件日期创建css类的im。date类的格式为

jquery

回答 3

Stack Overflow用户

回答已采纳

发布于 2022-06-21 07:59:38

这可能不是最简单的方法，但您可以对所有元素进行一些分组，以找到每个组的第一个元素，并将css样式应用于该组。

var $elems = jQuery('div[class^="event_date_"]')

var firstofGroup = Object.values($elems.get().reduce( (acc,e) => {
    const cls = e.classList[0];
    acc[cls] ||= [], acc[cls].push(e);
    return acc
},{})).map(x => x[0])

$(firstofGroup).css("color","blue");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="event">
 <div class="event_date_20-06-2020">title event</div>
</div>
<div class="event">
 <div class="event_date_20-06-2020">title event</div>
</div>
<div class="event">
 <div class="event_date_21-06-2020">title event</div>
</div>
<div class="event">
 <div class="event_date_22-06-2020">title event</div>
</div>
<div class="event">
 <div class="event_date_22-06-2020">title event</div>
</div>

票数 0

Stack Overflow用户

发布于 2022-06-21 07:58:26

我认为你是对的，你不能仅仅用CSS来做这件事。

您可以通过查找这些类并将它们添加到Set中来标识所有的惟一类，然后使用每个类和jQuery的:first伪类遍历集合，在每个类的第一次出现时执行一些操作(在本例中，将它们变成蓝色，但您可以对它们做任何需要做的事情)：

const classes = new Set($('[class^="event_date_"]').map((_, e) => {
    return e.className.match(/event_date_\d{2}-\d{2}-\d{4}/)[0];
}).get());
for (const cls of classes) {
    $(`.${cls}:first`).css("color", "blue");
}

活生生的例子：

const classes = new Set($('[class^="event_date_"]').map((_, e) => {
    return e.className.match(/event_date_\d{2}-\d{2}-\d{4}/)[0];
}).get());

for (const cls of classes) {
    $(`.${cls}:first`).css("color", "blue");
}

<div class="event">
 <div class="event_date_20-06-2020">title event</div>
</div>
<div class="event">
 <div class="event_date_20-06-2020">title event</div>
</div>
<div class="event">
 <div class="event_date_21-06-2020">title event</div>
</div>
<div class="event">
 <div class="event_date_22-06-2020">title event</div>
</div>
<div class="event">
 <div class="event_date_22-06-2020">title event</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

或者，您可以通过将其中包含逗号的选择器组合在一起来构建一个大的选择器，但似乎很难阅读和维护：

$([...classes].map(
    (cls) => `.${cls}:first`
).join(","))
.css("color", "blue");

活生生的例子：

const classes = new Set($('[class^="event_date_"]').map((_, e) => {
    return e.className.match(/event_date_\d{2}-\d{2}-\d{4}/)[0];
}).get());

$([...classes].map(
    (cls) => `.${cls}:first`
).join(","))
.css("color", "blue");

<div class="event">
 <div class="event_date_20-06-2020">title event</div>
</div>
<div class="event">
 <div class="event_date_20-06-2020">title event</div>
</div>
<div class="event">
 <div class="event_date_21-06-2020">title event</div>
</div>
<div class="event">
 <div class="event_date_22-06-2020">title event</div>
</div>
<div class="event">
 <div class="event_date_22-06-2020">title event</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

票数 0

Stack Overflow用户

发布于 2022-06-21 07:59:30

如果您可以将date类向上移动一个级别，到事件容器，则可以使用邻接同胞组合器解决这个问题。

因此，您的代码应该是(我已经对事件进行了编号，因此效果更加明显)：

.event_date_20-06-2020 + .event_date_20-06-2020,
.event_date_22-06-2020 + .event_date_22-06-2020 {
    display: none;
}

<div class="event event_date_20-06-2020">
 <div>title event 1</div>
</div>
<div class="event event_date_20-06-2020">
 <div>title event 2</div>
</div>
<div class="event event_date_21-06-2020">
 <div>title event 3</div>
</div>
<div class="event event_date_22-06-2020">
 <div>title event 4</div>
</div>
<div class="event event_date_22-06-2020">
 <div>title event 5</div>
</div>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/72697100

复制

相似问题

问针对生成类的第一个实例
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问针对生成类的第一个实例EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问针对生成类的第一个实例
EN