如何使用 jquery 清除未处于活动状态的内容？答案

【问题标题】：How to clear content which is not in active using jquery?如何使用 jquery 清除未处于活动状态的内容？
【发布时间】：2012-01-10 12:23:11
【问题描述】：

我正在为我的项目使用 jquery UI 选项卡。请检查html代码

<div id="tabs">
    <ul>
        <li><a href="#tabs-1" id="preload" class="load_cont" rel="tabs-1||general">General</a></li>
        <li><a href="#tabs-2" class="load_cont" rel="tabs-2||admin_products">Admin Products</a></li>
        <li><a href="#tabs-3" class="load_cont" rel="tabs-3||admin_category">Admin Category</a></li>
        <li><a href="#tabs-4" class="load_cont" rel="tabs-4||admin_others">Others(Admin)</a></li>
    </ul>
    <div id="tabs-1"></div>
    <div id="tabs-2"></div>
    <div id="tabs-3"></div>
    <div id="tabs-4"></div>
</div>

当我单击一个选项卡时，我使用 ajax 获取表单，效果很好。检查下面的 js 代码，该代码取自 phtml 文件，

<script type="text/javascript">
    $(function(){

        // Tabs
        $('#tabs').tabs();                        
        //hover states on the static widgets
        $('#dialog_link, ul#icons li').hover(
        function() { $(this).addClass('ui-state-hover'); }, 
        function() { $(this).removeClass('ui-state-hover'); }             
    );

        $('.load_cont').click(function()
        {
            var groupname;
            var id = $(this).attr('rel');
            var gnameArr = id.split('||');
            groupname = gnameArr[1];

            //alert(gnameArr[1]);
            var url = <?php echo BASE_URL; ?> + '/admin/settings/getqtips/gname/'+groupname;
            //alert(id);
            $.ajax({
                type:'POST',
                dataType:'json',
                url:url+'/math/'+Math.random(),
                data:'',
                success:function(response)
                {   
                    if(response.MSG == 'DONE')
                    {
                        $("#"+gnameArr[0]).html(response.TPL);
                        $('div#'+gnameArr[0]+' #gname').val(groupname);
                    }
                }
            });                   
        }    
    );              
    });
    $(function(){
        $('a#preload').click();
    })
</script>

我的要求是，当我点击相应的选项卡时，我需要清除其他选项卡内的 html。也就是说，如果我点击tabs-2，其他选项卡（tabs-1、tabs-3、tabs-4）的内容应该是清晰的。这个保存了我在 zend 上的验证。

请就此提出建议。

【问题讨论】：

你的 div 是不是带有 id 标签或者这些是动态的

标签： javascript jquery jquery-ui zend-framework jquery-selectors

【解决方案1】：

在你的成功函数中清空所有其他 div

$('div[id^="tabs-"]').each(function(){  //search for all divs which id starts with 'tabs-'
  if (this.id != gnameArr[0]) { //if this is not clicked one
    $(this).empty(); //clear its content
  }
});

或falsarella's tip

$('.load_cont').click(function() {
  var clickedEl = $('#'+gnameArr[0]);
  ...
  success:functi...

  $('div[id^="tabs-"]').not(clickedEl).empty();

...

【讨论】：

【解决方案2】：

或者，您可以设置具有相同类的容器元素，例如.container。

// Clear all container before you set the new one.
$('.container').html('');

【讨论】：

【解决方案3】：

这样的事情怎么样：

$('.load_cont').click(function(){
     $('.load_cont').not($(this)).each(function(i,el){
          $($(el).attr('href')).empty();
     });
});

【讨论】：

【解决方案4】：

选中没有被选中的div，全部清除：

$('#tabs > div:not(#' + gnameArr[0] + ')').empty();

【讨论】：