jquery隐藏标记中的文本内容,而不是标记本身

时间:2012-12-25 18:52:28

标签: jquery html hide

我有一个使用此html语法的滑块:

<div id="theatre">
    <a class="sliderImg" href="01.jpg" />some-text</a>
    <a class="sliderImg" href="02.jpg" />another-description</a>
    <a class="sliderImg" href="03.jpg" />whatever</a>
    <a class="sliderImg" href="04.jpg" />whatever</a>
</div>

我需要做的是隐藏标签的文本而不是标签本身。

我得到了这个但是没有用。

var imgCaptions = $("#theatre a.sliderImg").html();
$(imgCaptions).hide();

我无法添加范围,因为我将内容用于某些AJAX。结构必须保留。

非常感谢你的帮助。圣诞快乐!

4 个答案:

答案 0 :(得分:9)

我建议:

a.sliderImg {
    color: transparent;
}

您还可以使用user-select CSS属性来阻止选择文本:

a.sliderImg {
    color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

或者,可能在元素本身上使用unselectable属性:

<a unselectable="on" class="sliderImg" href="04.jpg">whatever</a>

顺便提一下,您的HTML格式不正确,/应该位于开始标记中(仅在void元素的开头标记中,例如input或{{ 1}})。

参考文献:

答案 1 :(得分:3)

您只需使用.text方法删除文字:

$(".sliderImg").text('');

小提琴:http://jsfiddle.net/J5QME/

如果您需要存储文本以供日后使用,请将其设置为父锚点上的数据属性:

$(".sliderImg").text(function(i,v){
    return $(this).data('originalText', v), '';
});

小提琴:http://jsfiddle.net/J5QME/2/

答案 2 :(得分:2)

你可以添加额外的标签ex。跨越文本内部并隐藏跨度  一些文本

$('#teathre span').hide();

答案 3 :(得分:0)

您可以尝试隐藏文字:

现场演示: http://jsfiddle.net/yw8w2/1/

$('#theatre a.sliderImg').map(function(){ $(this).text(''); });