隐藏包含文本的类的所有元素

时间:2015-09-08 09:27:20

标签: javascript jquery html css

基本上,我有一些<span>个元素,其中temp_val类包含我要隐藏的1值。这些元素分散在我的html文件中。

以下是我的HTML代码片段:

<div class="row" style="float: left; width: 80%; margin-top: 10px; ">
    <strong>                            
        <span class="temp_val">Value1</span>
        <span style='visibility:hidden' class='temp_val_name'>1</span>
    </strong><br>
    <font size="2">
        <img src="assets/images/maps.png" height="12" width="7" style="vertical-align: middle;" >Image1
        <span style='visibility:hidden' class='temp_val_name'>1</span>
        <img src="assets/images/earphone.png" height="12" width="10" style="vertical-align: middle;" >Image2
        <span style='visibility:hidden' class='temp_val_name'>0</span>
        <img src="assets/images/envelope.png" height="11" width="14" style="vertical-align: middle;">Image3
        <span style='visibility:hidden' class='temp_val_name'>1</span>
    </font>   
</div>

这是我的jQuery,它不起作用:

$(".temp_val_name").each(function() {
    if ($(this).text() == '1') {
        $('.temp_val').hide();
    }
});

这是我的第一个jQuery代码,但仍无效:

if($('.temp_val_name').text() == '1') {
    $('.temp_val').hide();
}

我还有很多要隐藏的元素。我只给你看了几个。 我该如何解决?

5 个答案:

答案 0 :(得分:0)

使用filter()过滤掉具有类temp_val_name且内心文本为1的元素,并隐藏具有类temp_val的元素

$(".temp_val_name").filter(function() {
  return $(this).text().trim() == 1;
}).hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="row" style="float: left; width: 80%; margin-top: 10px; ">
  <strong>
    <span class="temp_val">Value1</span>
    <span class='temp_val_name'>1</span>
  </strong>
  <br>
  <font size="2">
    <img src="assets/images/maps.png" height="12" width="7" style="vertical-align: middle;">Image1
    <span class='temp_val_name'>1</span>
    <img src="assets/images/earphone.png" height="12" width="10" style="vertical-align: middle;">Image2
    <span class='temp_val_name'>0</span>
    <img src="assets/images/envelope.png" height="11" width="14" style="vertical-align: middle;">Image3
    <span class='temp_val_name'>1</span>
  </font>
</div>

答案 1 :(得分:0)

我想它应该是

if($(this).html() == '1') {

答案 2 :(得分:0)

尝试将类名称作为数组

例如: - temp_val_name[]在你的元素中并在你的jquery中应用它。

答案 3 :(得分:0)

Have a working fiddle

$('.temp_val_name').filter(function() {
   return !!($.trim( $(this).text() ) == '1');
}).hide();

答案 4 :(得分:-1)

在身体中尝试此循环并检查值1,如果找到则隐藏该范围。

<script type="text/javascript">
    $(document).ready(function () {
         $("body span").each(function () {
             var val = parseInt($(this).html());
             if($.isNumeric(val) && val == 1){
                $(this).hide()
             }
         });
    });
</script>