jquery 如何隐藏元素中的文本内容,但不隐藏子元素?

yvt65v4c  于 12个月前  发布在  jQuery
关注(0)|答案(4)|浏览(121)

我有下面的HTML结构,我想把点隐藏在td里面。限制是,我不能改变HTML。

<td>•&nbsp;<a href="">Link 1</a></td>

我试过使用JavaScript,但似乎不起作用

var str = $('.container table tbody tr td').html();
str.replace('•&nbsp;', '');
$('.container table tbody tr td').html(str);

有没有一个纯CSS的方法来做到这一点?

xtfmy6hx

xtfmy6hx1#

使用CSS,你可以用font-size“隐藏”文本,例如:

td {
  font-size: 0;
}
td a {
  font-size: 1rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>•&nbsp;<a href="">Link 1</a>
    </td>
    <td>•&nbsp;<a href="">Link 1</a>
    </td>
    <td>•&nbsp;<a href="">Link 1</a>
    </td>
  </tr>
</table>

或者使用Jquery“删除”该文本节点,使用类似这样的方法:

$('td').html(function(){
  return $(this).contents().slice(1);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>•&nbsp;<a href="">Link 1</a>
    </td>
    <td>•&nbsp;<a href="">Link 1</a>
    </td>
    <td>•&nbsp;<a href="">Link 1</a>
    </td>
  </tr>
</table>
cngwdvgl

cngwdvgl2#

有志者事竟成。不知道为什么你的jQuery不起作用,但这里有一个只支持CSS的解决方案。请注意,您需要td和链接上的样式。点击“运行代码片段”来查看它的工作情况。

table tr:first-child td:first-child {
  position: relative;
  text-indent: -9999px;
}

table tr:first-child td:first-child a {
  position: absolute;
  text-indent: 0;
  top: 0;
  left: 0;
}
<table border="1">
  <tr>
    <td>•&nbsp;<a href="#">Link</a></td>
    <td>Text here</td>
  </tr>
  <tr>
    <td>Text here</td>
    <td>Text here</td>
  </tr>
</table>
xiozqbni

xiozqbni3#

// you may do something like this in pure css  

td {
    font-size: 0;
}
td a {
    font-size: 14px;
}
6bc51xsx

6bc51xsx4#

您可以使用 contentattr
中文(简体)

td:after {
  content: attr(data-text);
  width: max-content;
  height: 100%;
}

对于隐藏文本,只需将此类添加到元素

td.hide-text:after {
  content: unset;
}

或者您可以使用@media

@media (min-width: 320px) and (max-width: 767px) {
  &:after {
    content: unset;
  }
}

联系我们

<td data-text="your text"></td>

相关问题