javascript - 循环遍历同一类的 div 并与其他类的 div 进行比较

Question

我正在尝试比较两个div的内容，如果内容相同，则隐藏第一个。这是我正在做的事情(有效):

<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"); 
  }

}

问题是，同一页面上有多个div，所以我需要使用class而不是id并循环遍历每个div并进行比较。这是我的草稿:

<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");
  }

}

你们知道怎么做吗？如果有一点帮助，我们将不胜感激。

Answer 1

在类代码中

  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);
  }

你总是重写变量firstText1。在此循环之后，firstText1 将保存最后一个 div 中的前 20 个字符，而不是所有 div 中的前 20 个字符(与 test2 相同)。您应该将文本(20 个字符)保存在数组中，然后进行比较。

试试这个:

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' );

此代码检查每个summary div。如果 div 与 content div 之一具有相同的文本，则会隐藏该 div。

如果您需要隐藏所有 summary div，且其中一个 div 与 content div 之一具有相同的文本，则

    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;
    }

更新:隐藏文章中的所有摘要

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] );
}