Question

<ul id="LivePlayList" class="ui-menu ui-widget ui-widget-content ui-front" tabindex="0" style="width: 1025px; top: 50px; left: 51px;">

    <li class="ui-menu-item" style="width:100%;height:25px;">
        <span style="width:100%;height:25px;display:flex;">
        <div id="ui-id-2" style="position: absolute;right:10px;margin-top: 2px" tabindex="-1">Qudosh Idto ܩܘܕܫ ܥܕܬܐ</div>
        <div style="display:none;">2</div>
        <div style="left:10px;position: absolute;margin-top: 2px;">Qudosh Idto qwdsch ʿdt</div>
        </span>
     </li>

</ul>

如何在点击ul li span

上获得第二个div文本

$("#LivePlayList").on('click','span',function (){

});

请帮帮我

Answer 1

import PropTypes from 'prop-types';
import React from 'react';

class EvolutionStep extends React.Component {

    componentDidMount() {
        this.props.mountCallable(this.props.step._id, this);
    }

    render() {
        return (
            <div style={{width: this.props.width + "%"}} data-identifier={this.props.step._id}>step</div>
        );
    };

}

class EvolutionArrow extends React.Component {

    render() {
        console.log(this.props);
        return (
            <div>arrow</div>
        );
    }
}

const EvolutionChain = class EvolutionChain extends React.Component {

    constructor(props) {
        super(props);

        this.processStack.bind(this);
        this.stepDidMount.bind(this);
        this.preRender.bind(this);

        this.state = {
            cols: 0,
            chainData: [],
            refs: {}
        };
    }

    componentDidMount() {
        this.processStack();
    }

    stepDidMount(step_id, element) {
        let refs = this.state.refs;

        if (undefined == typeof(refs[step_id])) {
            refs[step_id] = element;
            this.setState({refs: refs});
        }
    }

    processStack() {
        if (null == this.props.chain) {
            return null;
        }

        let stack = [this.props.chain.children[0]];
        let results = [];

        while (stack.length > 0) {
            const current = stack.pop();
            // build current element
            results.push({type: 'step', props: {step: current} });
//            results.push(<EvolutionStep key={current._id} ref={(step) => this.addRef(current._id, step)} step={current} width={(100 / this.state.cols)}/>);
            this.setState({cols: this.state.cols + 1});
            if (current.children.length > 0) {
                let arrows = [];
                current.children.map((item) => {
                    arrows.push({pointsTo: item._id});
                    //arrows.push(<EvolutionArrow pointsTo={item._id} references={this.state.refs}/>);
                });
//                results.push(<div className="arrow" width={(100 / this.state.cols)}>{arrows}</div>);
                results.push({type: 'arrows', arrows: arrows});
                this.setState({cols: this.state.cols + 1});
                stack = current.children;
            }
        }

        results.reverse();
        this.setState({chainData: results});
    }

    preRender() {
        var components = [];
        this.state.chainData.map((item) => {
            switch (item.type) {
                case 'step':
                    components.push(<EvolutionStep key={item.props.step._id} {...item.props} mountCallable={(step_id, elem) => this.stepDidMount(step_id, elem)}/>);
                    break;
                case 'arrows':
                    let arrows = [];
                    item.arrows.map((arrow) => {
                        arrows.push(<EvolutionArrow pointsTo={arrow.pointsTo} references={this.state.refs[arrow.pointsTo]} />);
                    });
                    components.push(<div className="arrow">{arrows}</div>);
                    break;
            }
        });

        return components;
    }

    render() {

        let toRender = this.preRender();
        return (
            <div className="container-fluid">
                {toRender}
            </div>
        );
    }

};

/** TODO: PropTypes **/

export default EvolutionChain;

$("#LivePlayList").on('click', 'li', function() {
  console.log($(this).find("div:nth-child(2)").text())
});

使用<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="LivePlayList" class="ui-menu ui-widget ui-widget-content ui-front" tabindex="0" style="width: 1025px; top: 50px; left: 51px;"> <li class="ui-menu-item" style="width:100%;height:25px;"> <span style="width:100%;height:25px;display:flex;"> <div id="ui-id-2" style="position: absolute;right:10px;margin-top: 2px" tabindex="-1">Qudosh Idto ܩܘܕܫ ܥܕܬܐ</div> <div style="display:none;">2</div> <div style="left:10px;position: absolute;margin-top: 2px;">Qudosh Idto qwdsch ʿdt</div> </span> </li> </ul> How to get 2nd div text on click ul li span
要获得第二个div使用.find()索引从1开始

Answer 2

您可以使用.find()，然后将其与:eq(x)结合使用，其中x是您想要的div编号（从0开始）

$(this).find("div:eq(1)")

$("#LivePlayList").on('click', 'span', function() {
  console.log($(this).find("div:eq(1)").text())
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="LivePlayList" class="ui-menu ui-widget ui-widget-content ui-front" tabindex="0" style="width: 1025px; top: 50px; left: 51px;">

  <li class="ui-menu-item" style="width:100%;height:25px;">
    <span style="width:100%;height:25px;display:flex;">
        <div id="ui-id-2" style="position: absolute;right:10px;margin-top: 2px" tabindex="-1">Qudosh Idto ܩܘܕܫ ܥܕܬܐ</div>
        <div style="display:none;">2</div>
        <div style="left:10px;position: absolute;margin-top: 2px;">Qudosh Idto qwdsch ʿdt</div>
    </span>
  </li>

</ul>

如何进入li＆gt; span 2nd Div text ..？

2 个答案: