बच्चे के तत्व को कैसे दिखाया जाए जब अन्य बच्चे तत्व JQuery

Question

के साथ बह रहा है, मैं हाल ही में एक टिप्पणी सुविधा पर काम कर रहा हूं। डिफ़ॉल्ट रूप से, पाठ युक्त अनुच्छेद तत्व की ऊंचाई 80px है। अतिप्रवाह छिपाने के लिए सेट है।

मेरे पास एक और बटन है (लेबल "अधिक देखें") जो ऊंचाई को 'ऑटो' में बदलकर पैराग्राफ फैलाता है। यह बटन केवल तभी दिखाना चाहिए जब अनुच्छेद सामग्री डिफ़ॉल्ट 80px ऊंचाई बहती है। अन्यथा बटन प्रदर्शित नहीं होना चाहिए।

मैंने लूप और कुछ JQuery कोड के लिए जावास्क्रिप्ट के साथ ऐसा करने का प्रयास किया है, हालांकि यह काम नहीं करता है। यह सभी टिप्पणी खंडों के लिए बटन दिखाता है या छुपाता है।

<div class="commentOwnerPost"> 
 
    <div class="commentPostHeader"> 
 
    <h4 class="commentOwnerName"><a href="">NavyFoxKid</a></h4> 
 
    <h4 class="commentPostDate">3 days ago</h4> 
 
    </div> 
 
    <p class="commentText"> lorem ipsum dolor sit amet consectur lorem ipsum dolor sit amet consectur 
 
\t amet consectur lorem ipsum dolor sit amet consectur lorem ipsum 
 
    </p> 
 
\t 
 
    <div class="commentPostFooter"> 
 
    <a class="btnReply">Reply</a> 
 
    <a class="btnSeeMore">See More</a> 
 
    </div> 
 
</div>

यहाँ जावास्क्रिप्ट है:

$(document).ready(function(){ 
 
    var element = $('.commentOwnerPost'); 
 
    for(i=0; i < element.length; i++){ 
 
    var commentText = $(element[i]).children('.commentText'); 
 
    if ($(commentText).offsetHeight < $(commentText).scrollHeight) { 
 
     $parent = $(commentText).parent('.commentOwnerPost'); 
 
     $parent.find('.btnSeeMore').hide(); 
 
     console.log('Comment text not overflowing '); 
 
    } else { 
 
     $parent = $(commentText).parent('.commentOwnerPost'); 
 
     $parent.find('.btnSeeMore').show(); 
 
     console.log('Comment text overflowing '); 
 
    } 
 
    
 
    $('.btnSeeMore').click(function(){ 
 
\t \t \t 
 
    }); 
 
    } 
 
});

समय देने के लिए पढ़ने के लिए के लिए धन्यवाद

यहाँ एचटीएमएल है । किसी भी सहायता की सराहना की जाएगी।

Answer 1

यह मेरे लिए पूरी तरह से काम करता है, मैं अपने कोड को आसान बनाने:

$(document).ready(function(){ 
 
    var elements = $('.commentOwnerPost'); 
 
    
 
    elements.each(function() { 
 
    var el = $(this).find('.commentText').get(0); 
 
    if(el.offsetHeight < el.scrollHeight) { 
 
     $(this).find('.btnSeeMore').show(); 
 
    } else { 
 
     $(this).find('.btnSeeMore').hide(); 
 
    } 
 
    }); 
 
});

.commentText { max-height: 25px; overflow:hidden;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="commentOwnerPost"> 
 
    <div class="commentPostHeader"> 
 
    <h4 class="commentOwnerName"><a href="">NavyFoxKid</a></h4> 
 
    <h4 class="commentPostDate">3 days ago</h4> 
 
    </div> 
 
    <p class="commentText"> lorem ipsum dolor sit amet consectur lorem ipsum dolor sit amet consectur 
 
\t amet consectur lorem ipsum dolor sit amet consectur lorem ipsum 
 
    </p> 
 
\t 
 
    <div class="commentPostFooter"> 
 
    <a class="btnReply">Reply</a> 
 
    <a class="btnSeeMore">See More</a> 
 
    </div> 
 
</div> 
 

 

 
<div class="commentOwnerPost"> 
 
    <div class="commentPostHeader"> 
 
    <h4 class="commentOwnerName"><a href="">NavyFoxKid</a></h4> 
 
    <h4 class="commentPostDate">3 days ago</h4> 
 
    </div> 
 
    <p class="commentText"> lorem ipsum dolor sit amet. 
 
    </p> 
 
\t 
 
    <div class="commentPostFooter"> 
 
    <a class="btnReply">Reply</a> 
 
    <a class="btnSeeMore">See More</a> 
 
    </div> 
 
</div>