Question

我有以下HTML：

<div class="content-body attribute-pdf">
<a href="/_fragment/content/download/296/1935/file/blabla.pdf">
blabla.pdf</a> 1.2 Mb
</div>

这是来自CMS，我想隐藏这个“1.2 MB”，但仍保留A href部分

这可以在jQuery中做到吗？

我试过了：

$(".attribute-pdf").children().hide();

隐藏了A href，但仍显示文字。我想反过来 - 隐藏文字，但仍然显示A href。

Answer 1

在jQuery中快速方法 - 清空div，用 <a>标记替换其内容：

$('.attribute-pdf').each(
  function() {
    var container = $(this);
    var a = container.find('a').detach();
    container.empty().append(a);   
  }
);

示例：http://codepen.io/paulroub/pen/iaFnK

Answer 2

您可以将父级的内容设置为孩子的内容......

$(".attribute-pdf").each(function(){
    var $this = $(this); // cache for performance
    $this.html($this.children());
});

Answer 3

获取内容（链接），清空div（删除1.2 mb）并再次附加链接。

http://jsfiddle.net/vpVMK/

    var content = $(".attribute-pdf a");
    $(".attribute-pdf").html(''); 
    $(".attribute-pdf").append(content);

Answer 4

你可以这样做：

// contents() gives children, all including non-element nodes.
// Then, we can filter those down to the final text one.
var textNodes = $( ".attribute-pdf" ).contents().filter(function() { 
    return this.nodeType === 3; 
});

var lastTextNode = textNodes.last();
//and replace 
lastTextNode.replaceWith('');

Answer 5

你可以这样做：

var children = $(".attribute-pdf").children();
$(".attribute-pdf").html(children);

http://jsfiddle.net/H2WVt/

Answer 6

这是另一种尚未发布的方法：

$(".attribute-pdf").html(function(){
    var $this = $(this),
        $tmp = $('<div>');

    return $.makeArray( $this.children('a').map(function() {
        $tmp.html(this)
        return $tmp[0].innerHTML
    }) ).join('')
})

fiddle

jQuery隐藏内部html，除了标签

6 个答案: