Question

I have a table with tr and td. My td has a div as its child. One div has id="question" and another has id="answer". I want, while traversing my td, the div that has id="answer" to be hidden. When page loads, only then the question div should appear. Here is the structure of the 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>

I did the following. But it hides whole 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)

My idea here is that, the div‘s that are on the push stack only should hide, but that’s not the real output.

Answer 1

You should not use multiple ID attribute which you will be doing if you have more than one row. Change this to class instead…

<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">

Then you can do this simple JQuery to hide the answer elements…

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

To answer you question directly, you are called the .hide() function on your collection of TD elements anyway.

You could move .hide() from the very end and put in with this line…

if ($divId == 'answer') {

    $div.hide();//hide your answer element
    var colNum = $(this).cellIndex;
    $cells = $cells.add($div);

} //end of if ($divId == 'answer')

…but this is way to much code for something so simple

EDIT: A Sample of what you might be trying to do