JSFiddle - React, Tailwind, and code Playground
by Shree Khanal
HTML
<div class="ng-tns" xpath="1">
<div class="character-slot">
<char class="ngText">
<div class="character" style="border-color: rgb(30, 130, 30); border-style: dashed;">
<div class="d-flex">
<div class="playername">
<div class="playername-display" style="color: lightgreen;">
<div style="font-size: 13px;">Main Char</div>
</div>
</div>
</div>
<div class="health-container">
<div class="health" style="transform: scaleX(1); background-color: yellow;"></div>
</div>
</div>
</char>
</div>
</div>
<div class="ng-tns" xpath="1">
<div class="character-slot">
<char class="ngText">
<div class="character" style="border-color: rgb(30, 130, 30); border-style: dashed;">
<div class="d-flex">
<div class="playername">
<div class="playername-display" style="color: lightgreen;">
<div style="font-size: 13px;">Monster</div>
</div>
</div>
</div>
<div class="health-container">
<div class="health" style="transform: scaleX(1); background-color: yellow;"></div>
</div>
</div>
</char>
</div>
</div>
<div class="ng-tns" xpath="1">
<div class="character-slot">
<char class="ngText">
<div class="character" style="border-color: rgb(30, 130, 30); border-style: dashed;">
<div class="d-flex">
<div class="playername">
<div class="playername-display" style="color: lightgreen;">
<div style="font-size: 13px;">Spy</div>
</div>
</div>
</div>
<div class="health-container">
<div class="health" style="transform: scaleX(1); background-color: yellow;"></div>
</div>
</div>
</char>
</div>
</div>
<div class="ng-tns" xpath="1">
<div class="character-slot">
<char class="ngText">
<div class="character" style="border-color: rgb(30, 130, 30);...
JavaScript
console.log($(".health").parent(".health-container").parent(".character").children("div:contains('Main Char')").length)
console.log($(".health").closest("div:contains('Main Char')").length);