Скрытие элементов в jQuery внутри таблицы

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>

Я сделал следующее. Но это скрывает весь тд.

$('#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, которые находятся только в стеке push, должны скрываться, но это не реальный результат.

Answer 1

Не следует использовать атрибут нескольких идентификаторов, который вы будете использовать, если у вас более одной строки. Вместо этого измените это на класс ...

<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();

Чтобы ответить на ваш вопрос напрямую, вы все равно называетесь функцией .hide() в вашей коллекции элементов TD.

Вы могли бы переместиться .hide() с самого конца и вставить эту строку ...

if ($divId == 'answer') {

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

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

... но это большой код для чего-то такого простого

РЕДАКТИРОВАТЬ : Пример того, что вы пытаетесь сделать

Answer 2

Используйте селектор.

Дайте всем полям ответов класс "answer"

И используйте:

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

, это скроет все из них с ответомучебный класс.Чтобы показать им, назовите идентификатор вопроса и класс ответа:

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

К сожалению, я не очень разбираюсь в таблицах, но я надеюсь, что ответ имеет какое-то значение.

Отредактировано для отражения комментариев.

Answer 3

Лучше, чтобы идентификаторы элементов были уникальными во всем документе.Это не обязательно, но это облегчит работу с вашими элементами.В вашем случае я бы поменял все ваши вопросы и отвечал бы за атрибуты id на классы.Тогда вы можете сделать это, чтобы скрыть все ваши ответы:

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