0

我想滚动到一个特定段落，该段落是元素的子元素的子元素

下面是我的 html 的简化版本。

我想滚动到带有ticketType 类名的段落。我的实际代码中有更多段落，所以我想通过 className 来定位它。

我不想滚动到这个className 的其他段落，所以我需要专门定位（并滚动到）id 为ticket0 的元素中className 为ticketType的段落。

{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中有类似的东西吗

4

1 回答 1

1

您会得到该控制台输出，因为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第 -th 个孩子： document.getElementById('ticket0').children[n].scrollIntoView({behavior: "smooth"})

于 2020-08-20T15:15:39.287 回答