使用jquery / javascript隐藏页面加载时的所有重复div

Question

我的页面多次显示异常消息，如下所示：

所以，我想要的是页面加载如果下面的div显示不止一次然后丢弃其他＆amp;一次只显示一条消息......

        <div style="width: 70%;text-align: left;margin-left: 15%;" class="alert alert-warning text-center alert-dismissible server-side-msg text-capitalize" role="alert">
         <span class="glyphicon glyphicon-warning-sign"></span>
              <strong>We apologize for the inconvenience,An exception occured,We will solve this issue asap...
              </strong>
          <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        </div>

那么如何隐藏/删除所有重复div以便使用jquery一次只显示一条消息？

Answer 1

尝试此操作：选择div所有role="alert"并将其全部隐藏，但首先隐藏它们。您也可以使用类选择器，如$('div[class="alert"]')

$(function(){
 // hide all alert but the first one
 $('div[role="alert"]').not(':first').hide();
});

Answer 2

请尝试以下代码：

    $(document).ready(function() 
    {
        $("divID").hide();
    });

Answer 3

var duplicated = {}, classname;
$('div').each(function() {
    classname = $(this).attr('class');
    duplicated[classname] = (duplicated[classname] | 0) + 1
})

for (var key in duplicated) {
    if (duplicated.hasOwnProperty(key) && duplicated[key] > 1) {
        $('div.' + key).slice(1).hide()
    }
}

Demo

PS：上述方法会删除基于div的重复class，您也可以将其修改为包含id。

Answer 4

很明显，所有警报都是bootstrap的警报对话框，因此javascript（jQuery）解决方案如下所示：

$(function() {

  //find all !visible! alert dialogs except the !last!! one and hide them..
  $('.alert:visible').not(':last').hide();
  //..you can also completely remove them from page, to avoid unnecessary DOM polution
  // please notice, that you will select ALL alerts, not only the visible ones...
  // $('.alert').not(':last').remove();
});

但您还应该了解服务器为什么在页面上呈现多个警报。

更有效的解决方案是上下文，如下所示：

$('#some-elem-with-all-alerts').find('.alert:visible').not(':last').hide();