CODEWITHSUNDEEP
javascriptjqueryhtml-tablejquery-selectors
Basit
Basit

Reputation: 8606

Hiding elements in jQuery inside a table

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.

Upvotes: 0

Views: 1559

Answers (3)

musefan
musefan

Reputation: 48415

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

Upvotes: 5

Eirinn
Eirinn

Reputation: 836

Use a selector.

Give all answer boxes a class of "answer"

And use:

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

this will hide all of them with the answer class. To show them call the question ID and the answer class: 

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

I'm not very well versed in tables unfortunately, but i hope the answer has some value.

Edited to reflect comments.

Upvotes: 2

davidethell
davidethell

Reputation: 12018

It is better for element ids to be unique across your document. This isn't absolutely required, but it will make it easier to work with your elements. In your case I would change all your question and answer id attributes to classes instead. Then you can do this to hide all your answers:

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

Upvotes: 1

Related Questions