Javascript 如何仅显示一个具有相同id的元素

这是我在堆栈溢出方面的第一个问题

我只是想知道以下情况的简单解决方案

<div *ngFor="let d of w.event">
<div class="date" id="d.date" >
              <p>
                <span style="font-size:1.75em">{{d.date | date:'dd'}}</span>
                <br>
                <strong>&nbsp;{{d.date | date:'EEE'}}</strong>
              </p>
            </div>

{{d.date}日期：'dd'}


{{d.date | date:'EEE'}}

循环div可以具有相同的id 我只想显示带有特定日期的第一个div，而忽略其余部分

---

这可以通过CSS或JavaScript实现吗？您不能在两个元素上使用相同的

id

。这是对

id

s的少数限制之一

您可以使用一个类：

<div class="show">Yes</div> <div class="show">No</div>

其他一些想法：

一,。您可以添加一个隐藏元素的类，而不是像上面那样使用

style.display

二,。您可以对元素使用单独的

id

s（或类），这样就不需要索引，例如：

<div id="show-yes">Yes</div> <div id="show-no">No</div>

---

根据我的经验，在所有浏览器上，您都可以使用无效的HTML和选择器（如

“[id=show]

）来完成上述第一件事（使用

querySelectorAll

），但是不要。改为修复HTML

---

在问题更新中，您显示：

<div *ngFor="let d of w.event">
<div class="date" id="d.date" >
...

---

首先，在HTML中ID是一个唯一的选择器，因此一个ID只能与一个元素关联。如果你想实现你想要的功能，你必须为两个DIV分配不同的ID。并使用javascript隐藏和显示DIV

<div id="showYes">Yes</div> <div id="showNo">No</div>

是否

如果您想一次显示一个，可以使用

*ngIf

，因为它一次只显示一个

<div id="show" *ngIf='your_status'>Yes</div> 
<div id="show" *ngIf='!your_status'>No</div>

是
不

---

更新问题后，您可以创建只返回唯一日期的自定义筛选器，因此只显示第一个唯一日期

// CREATE A PIPE FILTER :
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'checkUniqueDate'})
export class UniqueDatePipe implements PipeTransform {
  transform(dataArray) {
    let dates = [];
    return dataArray.filter(data => {
        return if(dates.indexOf(data.date) === -1) {
            dates.push(data.date);
            return true;
        } else {
            return false;
        }
    });
  }
}

// TEMPLATE SIDE :
<div *ngFor="let d of (w.event | checkUniqueDate )">

//创建管道过滤器：
从“@angular/core”导入{Pipe，PipeTransform}；
@管道（{name:'checkUniqueDate'}）
导出类UniqueDatePipe实现PipeTransform{
转换（数据阵列）{
让日期=[]；
返回dataArray.filter（数据=>{
返回if（dates.indexOf（data.date）=-1）{
日期推送（data.date）；
返回true；
}否则{
返回false；
}
});
}
}
//模板侧：

还可以在课堂上添加日期，然后您可以尝试下面的代码

.YOUR_DATE{
    display:none
}
.YOUR_DATE:first-child{
    displany:inline
}

---

两个元素不能具有相同的id。在html中，它不接受具有相同名称的两个id。具有具有相同id的多个属性的html无效。您应该改为修复html。是否有唯一标识我的div的方法？除了使用id之外？感谢您的回答。我知道多id规则，但具有相同id的原因是因为我将获取动态绑定到html的id，某些元素可能具有相同的id，我希望避免使用相同的iddisplay@AkashMahale：再次说明：您需要修复代码，这样您就不会生成具有相同

id

的元素。如果您意识到这个问题，那么编码

就没有多大意义了….？原因是…我想如何只显示第一个div例如，我只想显示一次3月30日。如果有多个3月30日…我不想要它们displayed@AkashMahale：那么为什么要循环？我从一个json获取此消息…因此我必须循环这些事件。如果同一天有两个事件，我只需要显示一次。感谢您的回答。我知道多个id规则，但拥有相同id的原因是因为我将获得动态绑定到html的id，一些元素可能具有相同的id..我想避免显示感谢您的回答…但是我将绑定json的div id，因此我需要一种方法，仅在代码上的div中使用ngIF，仅当您没有两个id时t在同一天你能给我看一下上面代码的wrt类的格式吗？我想你需要创建一个自定义指令，在那里你可以检查最后存储的日期，然后决定是否显示这个div

<div id="show" *ngIf='your_status'>Yes</div> 
<div id="show" *ngIf='!your_status'>No</div>

// CREATE A PIPE FILTER :
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'checkUniqueDate'})
export class UniqueDatePipe implements PipeTransform {
  transform(dataArray) {
    let dates = [];
    return dataArray.filter(data => {
        return if(dates.indexOf(data.date) === -1) {
            dates.push(data.date);
            return true;
        } else {
            return false;
        }
    });
  }
}

// TEMPLATE SIDE :
<div *ngFor="let d of (w.event | checkUniqueDate )">

.YOUR_DATE{
    display:none
}
.YOUR_DATE:first-child{
    displany:inline
}