如何在jQuery中獲取節點元素的索引

Question

我正在嘗試獲取ap標簽的索引，以便當用戶單擊它時p標簽將更改顏色或文本大小（也許兩者）。 我正在使用reactjs，但是我正在嘗試在jquery中做到這一點。 我給每個p標簽一個數據和名稱屬性。 這是我的代碼。 我如何做到這一點，以便只有被單擊的元素才能進行css更改，以便用戶知道它已被選中。 運行p標簽的函數在HTML showChapters函數中。

 $(onReady) function onReady() { $("#voteSearchInput").submit(function (e) { e.preventDefault(); return false; });//end of voteSearchInput $('#root').on('click', '.bookChapters' ,() => { console.log('clicked') //I want to change the color here }); }//end of onReady 

 import React from 'react'; import {connect} from 'react-redux'; import {bindActionCreators} from 'redux'; import {Link} from 'react-router-dom'; import Header from './Header.jsx'; import axios from 'axios'; class Book extends React.Component { constructor(props) { super(props); this.state = { book:Object, user:Object, chapters:[], chapterCount:0, ready:false, };//end of state }//end of constructor start() { console.log(this.state.book) } showChapters() { let chapterCount = this.state.chapterCount; let chapters = this.state.book.length; let chatpersArr = this.state.chapters; for(let i = 0; i < chapters; i++) { chatpersArr.push([]) } return ( chatpersArr.map((ch, id) => { chapterCount++; return ( <p key={id} className='bookChapters' data-index={id}>{this.state.book.book} Chapter:{chapterCount}</p> ) }) ) }//end start componentWillMount() { //Always gettting the last book out of the array //AUTHENTICATES THE USER axios.get('/login').then(res => { let userInfo = res.data; if(userInfo === "Not Authenticated") { window.location = "/?#/"; } });//end of axios GET //GETS THE CORRECT BOOK FROM THE REDUCER if(this.props.book.editBookReducer.length - 1 === -1) { window.location = "/?#/user"; } else { let lastBook = this.props.book.editBookReducer.length -1; let book = this.props.book.editBookReducer[lastBook].data.book; let user = this.props.book.editBookReducer[lastBook].data.user; this.setState({book, user, ready:true}); } }//end componentWillMount render() { if(!this.state.ready){ return false; } else { return ( <div> <Header/> <button onClick={this.start.bind(this)} >start</button> <div className="container"> <div className="row" style={{"textAlign": "center"}}> <div className="col-md-12"> <h1>{this.state.book.book}</h1> </div> </div> <div className="row" style={{"textAlign": "center"}}> <div className="col-md-6"> {this.showChapters()} </div> <div className="col-md-6"> <textarea name="" id="" cols="50" rows="60"></textarea> </div> </div> </div> </div> ); } } }//end class Book function mapDispatchToProps(dispatch) { return bindActionCreators({ }, dispatch) } function mapStateToProps(state) { return { book:state } } export default connect(mapStateToProps, mapDispatchToProps)(Book); 

Answer 1

React具有內置的事件處理系統，您可以利用它。 有關更多信息， 請參閱文檔。

在這里，我將onClick分配給p元素，並使用您定義的data-index 。

class Book extends React.Component {

  handleChapterClicked = (event) => {
    // you can get the index like this
    let pIndex = event.target.getAttribute("data-index");
    // your logic for the handler here
  }

  showChapters() {
    let chapterCount = this.state.chapterCount;
    let chapters = this.state.book.length;
    let chatpersArr = this.state.chapters;


    for(let i = 0; i < chapters; i++) {
        chatpersArr.push([])
    }


    return (
        chatpersArr.map((ch, id) => {
            chapterCount++;
            return (
                <p key={id} className='bookChapters' onClick={this.handleChapterClicked} data-index={id}>{this.state.book.book} Chapter:{chapterCount}</p>
            )
        })
    )
  }//end start
}

---

您可以擺脫data-index屬性，並將索引綁定為傳遞給handleChapterClicked的第一個參數：

<p key={id} className='bookChapters' onClick={this.handleChapterClicked.bind(this, id)} data-index={id}>{this.state.book.book} Chapter:{chapterCount}</p>

然后將函數的定義更改為：

handleChapterClicked = (index, event) => {
    // your logic for the handler here
}