Скрытие элементов в 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 «s, которые находятся на нажимной стек только должен скрывать, но это не реальный выход.

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

Чтобы ответить вам вопрос прямо, вы назвали .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') 

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

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

Answer 2

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

Дайте ответить на все коробочный класс «ответа»

и использование:

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

это скроет все из них с классом ответа. Для того, чтобы показать их вызвать ID вопроса и класс ответа:

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

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

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

Answer 3

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

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