如何解决按className滚动到一个视图,该视图是元素的子元素的子元素-纯JS
我想滚动到一个特定段落,该段落是元素的子元素的子元素
下面是我的html的简化版本。
我想滚动到具有ticketType的className的段落。我的实际代码中有更多段落,因此我想按className定位。
我不想滚动到具有此className的其他段落,因此我需要在具有以下元素的元素中专门定位(滚动到)具有 ticketType 的className的段落 ticket0的ID。
{this.state.tickets.map((e,i) => {
return (
<div className = "content createTicket" id={`ticket${i}`} >
<form key={i}>
<p className="warning ticketType">{this.state.tickets[i].errors.ticketType}</p>
<div className="group">
<input
required
type="text"
value={this.state.tickets[i].ticketType}
onChange={event => this.changeTicketDetails(event,'ticketType',i)}
placeholder="Ticket Name eg. General Admission"
/>
</div>
</form>
)
})}
此代码将滚动到父div:
document.getElementById(`ticket0`).scrollIntoView({behavior: "smooth"})
我正在尝试使用以下方法获得更多选择:
document.getElementById(`ticket0`).children
但是当我在console.log中登录时,它无法识别该段落。我得到了:
HTMLCollection(2)
0: form
0: input
在CSS中,我可以将其定位为#ticket0 < .ticketType
在Javascript中是否有类似的东西
解决方法
由于parentNode.children
返回的是HTMLCollection而不是单个元素,因此获得了控制台输出。
要实现所需的行为,您可以尝试:
document.querySelector('#ticket0 > .ticketType').scrollIntoView({behavior: "smooth"})
或提出另一种方式:
document.getElementById('ticket0').getElementsByClassName('ticketType')[0].scrollIntoView({behavior: "smooth"})
或者如果您只照顾第一个孩子:
document.getElementById('ticket0').firstElementChild.scrollIntoView({behavior: "smooth"})
或者如果您关心第n
个孩子:
document.getElementById('ticket0').children[n].scrollIntoView({behavior: "smooth"})
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。