在表格中隐藏jQuery中的元素

Question

我有一张带有tr 和td 的桌子。我的td 有一个div 作为它的孩子。一个div 有id="question"，另一个有id="answer"。我希望在遍历我的td 时隐藏具有id="answer" 的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="answer">
    <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 应该隐藏，但这不是真正的输出。

Answer 1

如果您有不止一行，则不应使用多个 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="answer">

然后你可以做这个简单的 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')

...但是对于如此简单的事情来说，这是一种太多的代码

编辑：A Sample of what you might be trying to do

Answer 2

使用选择器。

给所有答案框一个“答案”类

并使用：

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

这将隐藏所有答案类。要向他们显示问题 ID 和答案类别：

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

不幸的是，我不太精通表格，但我希望答案有一些价值。

已编辑以反映 cmets。

Answer 3

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

$('#faqGrid tr td div.answer').hide();