Question

我有一张包含tr和td的表格。我的td有一个div。一个div有id="question"，另一个有id="answer"。我希望，在遍历td时，div隐藏id="answer"。页面加载时，只会出现问题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();

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

编辑以反映评论。

Answer 3

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

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

在表格中隐藏jQuery中的元素

3 个答案: