Find div with same text and click on it by click on div-CodePudding

How can i trigger a click on the div (from time-table html block) with the exact same text of the div (from list-events html block) which i click on? (jQueryprefered )

Note: IDs are unique.

Sample HTML Block:

    <div id="list-events">  
    <div >             
        09.07.2022 / 16:00 One Way (ID 4178)<span >hasan</span>                
    </div>
    <div >            
        12.07.2022 / 19:00 One Way (ID 4179)<span >hasan</span>                
    </div>
    <div >            
        22.07.2022 / 11:00 One Way (ID 4180)<span >hasan</span>                
    </div>
</div>

<div id="time-table">
    <div >            
        09.07.2022 / 16:00 One Way (ID 4178)<span >hasan</span>                
    </div>
    <div >            
        12.07.2022 / 19:00 One Way (ID 4179)<span >hasan</span>                
    </div>
    <div >            
        22.07.2022 / 11:00 One Way (ID 4180)<span >hasan</span>                
    </div>  
</div>

div i click on:

    <div >             
        09.07.2022 / 16:00 One Way (ID 4178)<span >hasan</span>                
    </div>

div i try to trigger a click:

    <div >            
        09.07.2022 / 16:00 One Way (ID 4178)<span >hasan</span>                
    </div>

CodePudding user response：

function matchedBy(elem) {
    //$(elem).data('id'); //Way 1, If you set the data to the element
    //$(elem).text().split('One Way')[0].trim(); //Way 2 for comparing datetime
    //$(elem).text().split('ID')[1].match(/\d /)[0]; //Way 3 for comparing id
    return $(elem).text().split(')')[0].trim(); //as requested
}

$('#list-events').on('click', '.jqtl-event-node', function () {
    let thisText = matchedBy(this);
    let matched = $('#time-table .fc-title').toArray().filter(a => matchedBy(a) === thisText);
    if (matched.length > 0) {
        $(matched[0]).click();
    }
});

$('#time-table').on('click', '.fc-title', function () {
    console.log('clicked', this)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="list-events">
    <div >
        09.07.2022 / 16:00 One Way (ID 4178)<span >hasan</span>
    </div>
    <div >
        12.07.2022 / 19:00 One Way (ID 4179)<span >hasan</span>
    </div>
    <div >
        22.07.2022 / 11:00 One Way (ID 4180)<span >hasan</span>
    </div>
</div>
<br>
<div id="time-table">
    <div >
        09.07.2022 / 16:00 One Way (ID 4178)<span >hasan</span>
    </div>
    <div >
        12.07.2022 / 19:00 One Way (ID 4179)<span >hasan</span>
    </div>
    <div >
        22.07.2022 / 11:00 One Way (ID 4180)<span >hasan</span>
    </div>
</div>