มีวิธีนับจำนวนบรรทัดใน div และรับ textContent ของคู่บรรทัดแรกหรือไม่ - Javascript [ซ้ำ]

Question

เป้าหมายของฉันคือรับความยาวของ textContent ของ 3 บรรทัดแรกใน div เช่น:

<div id="content" style="width: 100%;  
                line-height: 20px"> 
        <p>hello how are you?</p> 
        <p>hello how are you too?</p> 
        <p>hello how are you john? </p> 
        <p>hello how are you sphia?</p> 
    </div> 

ฉันสามารถนับจำนวนบรรทัดที่มีอยู่ใน div โดยใช้:

 function countLines() {
   var el = document.getElementById('content');
   var divHeight = el.offsetHeight
   var lineHeight = parseInt(el.style.lineHeight);
   var lines = divHeight / lineHeight;
   alert("Lines: " + lines);
}

อย่างไรก็ตามฉันต้องการทราบว่ามีวิธีค้นหาความยาวของข้อความของ 3 บรรทัดแรกในกรณีข้างต้น:

 <p>hello how are you?</p> 
            <p>hello how are you too?</p> 
            <p>hello how are you john? </p> 

สมมติว่าฉันทำ:

var lines = countLines(); // 4
if (lines > 3) {
  test = document.getElementById("content").textContent.length;
// get the length of first 3 lines
}

เป็นไปได้ไหมในจาวาสคริปต์

Answer 1

หากคุณต้องการใน jQuery

let p = $('#content').find('p'); for (i = 0; i < 3; i++) { console.log($(p[i]).text().length);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content" style="width: 100%;  
                line-height: 20px">
  <p>hello how are you?</p>
  <p>hello how are you too?</p>
  <p>hello how are you john? </p>
  <p>hello how are you sphia?</p>
</div>

จบ js

let p=document.getElementById("content");
let v=p.getElementsByTagName("p"); 
for (i = 0; i < 3; i++) {
  console.log(v[i].innerHTML.length);
}

<div id="content" style="width: 100%;  
                line-height: 20px">
  <p>hello how are you?</p>
  <p>hello how are you too?</p>
  <p>hello how are you john? </p>
  <p>hello how are you sphia?</p>
</div>