jquery 暗藏 显示 html 标签 非内容

jquery 隐藏 显示 html 标签 非内容

<div>
    <span class='red'>test0<span class='line'>test1</span></span><span class='blue'>test2</span>
</div>
隐藏标签变成这样的:
<div>
    <!--<span class='red'>-->test0<!--<span class='line'>-->test1<!--</span>--><!--</span>--><!--<span class='blue'>-->test2<!--</span>-->
</div>
显示标签去除各标签的 <!-- -->

如果用 $('span').removeAttr("class"); 那么恢复显示时需要全部从服务器去取,不建议.
请问用jquery如何实现注释掉标签呢?

[解决办法]
看看这样OK不

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.0.min.js"></script>
<script type="text/javascript">
    $(function () {
    //获取注释的HTML
        var html = $('#div1').html();        
        //把注释替换掉
        var html2 = html.replace(/<!--([\s\S]*?)-->/g , '$1');
        //将注释替换后的HTML添加到div2中
        $('#div2').html(html2);
    })
</script>

<span style="font-size: 16px;"><div>
    <span class='red'>test0<span class='line'>test1</span></span><span class='blue'>test2</span>
</div></span>
<span style="font-size: 18px;">隐藏标签变成这样的:</span>
<span style="font-size: 16px;"><div id="div1">
    <!--<span class='red'>-->test0<!--<span class='line'>-->test1<!--</span>--><!--</span>--><!--<span class='blue'>-->test2<!--</span>-->
</div></span>
<span style="font-size: 18px;">显示标签去除各标签的 <!-- --></span>
<div id="div2"></div> 
<span style="font-size: 18px;">如果用 $('span').removeAttr("class"); 那么恢复显示时需要全部从服务器去取,不建议.
请问用jquery如何实现注释掉标签呢?</span>

[解决办法]
注释在IE下获取不到的，所以最好是通过设置class来实现样式的切换

至于你说的$('span').removeAttr("class"); 那么恢复显示时需要全部从服务器去取,不建议.

不知道什么意思，设置class不会和服务器交互

<style>
.red{color:red}
.line{display:block;}
.blue{color:blue}
</style>
<script src="http://www.coding123.net/js/jquery.js"></script>
<span style="font-size: 16px;"><div id="dv1">
    <span class='red'>test0<span class='line'>test1</span></span><span class='blue'>test2</span>
</div></span>
<input type="button" value="隐藏" onclick="toggle(this)"/>
<script>
function toggle(btn){
  var hide=btn.value=='隐藏';
  $('#dv1 span').each(function(){
     this.className=hide?this.className+'--hide':this.className.replace('--hide','') 
 
  }); 
 btn.value=hide?'显示':'隐藏';
}
</script>

[解决办法]

var html1 = "<span class='red'>aaa<span class='line'>bbb</span></span>ccc<span class='blue'></span>";
var i = 0 ;
var html2 = html1.replace(/(<[\/]?span[^>]*>)/g , function(){
return '<!--'+arguments[0]+'-->';
});

查看更多 下一篇