将jQuery中的元素隐藏在表中

Hiding elements in jQuery inside a table

本文关键字：隐藏 jQuery 元素      更新时间：2023-09-26

我有一个包含tr和td的表。我的td有一个div作为它的子级。一个div具有id="question"，另一个具有id="answerswer"。在遍历td时，我希望隐藏具有id="answerswer"的div。页面加载时，只应出现问题div。以下是html 的结构

<td style="display: none;">
    <div style="border-color: #000000;position: relative;float: right;margin-top: 2px;right: 12%;"> </div>
    <div style="border-color: #000000;position: relative;float: right;margin-top: 2px;right:-2%;"> </div>
    <div id="question">
        <img id="faqGrid:0:j_idt77" height="10" width="480" src="/TDAP/faces/javax.faces.resource/spacer/dot_clear.gif?ln=primefaces&amp;v=2.2.RC2">
        <br>
        <br>
    <div id="answerswer">
    <div class="horizontalline"></div>
</td>

我做了以下事情。但它隐藏了整个td.

$('#faqGrid tr td').each(function(){
    var $cells = $();
   /**
    *Gives you all children as an object array
    * 0: div
    * 1: div
    * 2: div#question
    * 3: img#faqGrid:0:j_idt77 /TDAP/fa...=2.2.RC2
    * 4: br
    * 5: br
    * 6: div#answer
    * 7: div.horizontalline
    */
    var tdChildrenArray = $(this).children();
    var divChildrenArray = $(this).children('div');
    var elementStack;
    $.each(divChildrenArray, function(index, value){
       var $div = value;
       if ($div.id) {
           var $divId = $div.id;
           if ($divId == 'answer') {
              var colNum = $(this).cellIndex;
              $cells = $cells.add($div);
           } //end of if ($divId == 'answer')
       } //end of if ($div.id)
    }); //end of  $.each(object, fn)
    return $(this).pushStack($cells);
}).hide(); //end of $('#faqGrid tr td').each(fn)

我的想法是，只在推送堆栈上的div应该隐藏，但这不是真正的输出。

您不应该使用多个ID属性，如果您有多行，则会使用多个属性。改为将其更改为类。。。

<div class="question">
    <img id="faqGrid:0:j_idt77" height="10" width="480" src="/TDAP/faces/javax.faces.resource/spacer/dot_clear.gif?ln=primefaces&amp;v=2.2.RC2">
    <br>
    <br>
<div class="answerswer">

然后您可以执行这个简单的JQuery来隐藏答案元素。。。

$(".answer").hide();

为了直接回答您的问题，无论如何，在TD元素集合中都会调用.hide()函数。

你可以把.hide()从最末端移到这条线上。。。

if ($divId == 'answer') {
    $div.hide();//hide your answer element
    var colNum = $(this).cellIndex;
    $cells = $cells.add($div);
} //end of if ($divId == 'answer')

但这是一种为如此简单的编写大量代码的方法

EDIT：的示例

使用选择器。

给所有答案框一类"答案"

使用：

$(".answer").hide();

这将用答案类隐藏所有答案。显示他们调用问题ID和答案类：

$("#Q1 .answer").show();

不幸的是，我不太熟悉表格，但我希望这个答案有一定的价值。

经过编辑以反映评论

元素id在文档中最好是唯一的。这不是绝对需要的，但它会使您更容易使用元素。在您的情况下，我会将您所有的问答id属性改为类。然后你可以这样做来隐藏你的所有答案：

$('#faqGrid tr td div.answer').hide();
相关文章：