循环遍历具有相同类的div并与来自其他类

时间:2016-07-07 09:50:04

标签: javascript

我正在尝试比较两个div的内容,如果内容相同,则隐藏第一个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");
  }

}

你们知道怎么做吗?非常感谢一点帮助。

2 个答案:

答案 0 :(得分: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(与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,如果其中一个与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] );
}

答案 1 :(得分:1)

我发现了一个更简单的解决问题的方法,就是:

adCategoryclicks = adclicksDF[['timestamp','adId','adCategory','userId','adCount']]

agrupadoDF = adCategoryclicks.groupby(pd.Grouper(key='timestamp', freq='1H'))['adCount'].agg(['count','sum'])

agrupadoDF.head(n=5)     
Out[68]: 
                     count  sum
timestamp                      
2016-05-26 15:00:00     14   14
2016-05-26 16:00:00     24   24
2016-05-26 17:00:00     13   13
2016-05-26 18:00:00     16   16
2016-05-26 19:00:00     16   16