我正在尝试比较两个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");
}
}
你们知道怎么做吗?如果有一点帮助,我们将不胜感激。
最佳答案
在类代码中
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] );
}
关于javascript - 循环遍历同一类的 div 并与其他类的 div 进行比较,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38242403/