Loop through divs with same class and compare with divs from other class

Question

I am trying to compare the content of two divs, and if the content is the same, hide the first one. Here is what I'm doing (works):

<div class="summary" id="para1">{{safe this.summary }}</div>

<div class="content" id="para2">{{safe this.body.value }}</div>

   function(){ 

  // get text from paragraph 1
  var text1 = document.getElementById("para1").innerText;
  // get text from paragraph 2
  var text2 = document.getElementById("para2").innerText;

  // get first 100 caracters from paragraph 1
  var firstTwentyText1 = text1.substr(0, 20);

  // get first 100 caracters from paragraph 2
  var firstTwentyText2 = text2.substr(0, 20);

  //if the first 100 caracters of the paragraphs are the same
  if ( firstTwentyText1 == firstTwentyText2 ) {
     // then it hides the first paragraph
     $("#para1").each(function(){
     document.getElementById("para1").style.display="none";});

  } else { 

    console.log("nothing found"); 
  }

}

The problem is, there are multiple divs on the same page, so I need to use class instead of id and loop through each and compare. Here is my draft:

<div class="summary para1">{{safe this.summary }}</div>

<div class="content para2">{{safe this.body.value }}</div>

  function() {

  // get text from paragraph 1
  var text1 = document.getElementsByClassName("summary");

  for (var i = 0; i < text1.length; i++) {
    var eachtext1 = text1[i].innerText;
    // get first 100 caracters from paragraph 1
    var firstText1 = eachtext1.substr(0, 20);
  }


  // get text from paragraph 2
  var text2 = document.getElementsByClassName("content");

  for (var i = 0; i < text1.length; i++) {
    var eachtext2 = text2[i].innerText;
    get first 100 caracters from paragraph 1
    var firstText2 = eachtext2.substr(0, 20);
  }

  // if the first 100 caracters of the paragraphs are the same
  if (firstText1 == firstText2) {
    // then it hides the first paragraph for all content

    document.getElementsByClassName("para1").style.display = "none";

  } else {

    console.log("nothing found");
  }

}

Do you guys know how to do that? A little help would be much appreciated.

Answer 1

In your code for classes

  for (var i = 0; i < text1.length; i++) {
    var eachtext1 = text1[i].innerText;
    // get first 100 caracters from paragraph 1
    var firstText1 = eachtext1.substr(0, 20);
  }

you always rewriting variable firstText1 . After this loop firstText1 will hold first 20 char from last div, not from all divs (same for test2). You should save texts (20 chars) in array and then compare.

Try this:

var summarys = document.getElementsByClassName("summary");
var contents = document.getElementsByClassName("content");

function get_first_20_chars( node ){
    var content = 'textContent' in node ? node.textContent : node.innerText; //still support ie8?
    var char20 = content.substr(0, 20);
    return char20
}

var char20_of_contents = [];
for( var i = 0, l=contents.length; i<l; i++ ){
    char20_of_contents[i] = get_first_20_chars( contents[i] ); 
}


var found = false;
for( var i = 0, l=summarys.length; i<l; i++ ){
    var summ_node = summarys[i];
    var char20_of_summ = get_first_20_chars( summ_node );
    if( char20_of_contents.some( function( content_char_20 ){ return content_char_20 === char20_of_summ; } ) ){
        summ_node.style.display = 'none';
        console.log( 'found node with same content', summ_node );
        found = true;
    }
}

if( ! found )
    console.log( 'nothing found' );

This code check every summary div. If div have same text as one of content divs, this it hide this div.

If you need to hide all summary div's if one of them have same text as one of content divs, then

    if( char20_of_contents.some( function( content_char_20 ){ return content_char_20 === char20_of_summ; } ) ){

        for( var j = 0; j<l; j++ )
             summarys[j].style.display = 'none'

        console.log( 'found node with same content', summ_node );
        found = true;
        break;
    }

UPDATE: hide all summarys in article

function get_first_20_chars( node ){
    var content = 'textContent' in node ? node.textContent : node.innerText; //still support ie8?
    var char20 = content.substr(0, 20);
    return char20
}

function hide_summ( article ){
    var summarys = article.getElementsByClassName( "summary" );
    var contents = article.getElementsByClassName( "content" );

    var char20_of_contents = [];
    for( var i = 0, l=contents.length; i<l; i++ ){
        char20_of_contents[i] = get_first_20_chars( contents[i] );
    }

    var found = false;
    for( var i = 0, l=summarys.length; i<l; i++ ){
        var summ_node = summarys[i];
        var char20_of_summ = get_first_20_chars( summ_node );

        for( var j = 0, l_content=char20_of_contents.length; j<l_content; j++ )
            if( char20_of_contents[ j ] === char20_of_summ ){

                for( var k = 0; k<l; k++ )
                    summarys[k].style.display = 'none';
                console.log( 'found node with same content', summ_node );
                found = true
                return
        }
    }

    console.log('nothing found');
}

var articles = document.getElementsByClassName('article');
for( var i = 0, l=articles.length; i<l; i++ ){
    hide_summ( articles[i] );
}

Answer 2

I found a simpler way to my problem, here it is:

$(document).ready(function() { 

console.log( 'code is loaded');

var startTime = new Date().getTime();
var interval = setInterval(function(){

    if(new Date().getTime() - startTime > 5000){

        clearInterval(interval);
        return;
    }

    $(".article-section.section-type-article_section").each(function(){  

        var summary = $(this).find(".summary"); 
        var content = $(this).find(".content") ; 

        if(summary.text().trim() == content.text().trim()){ 
             console.log( 'found article summary with same content');
            summary.hide();
        } 
    }); 

}, 10);     

});