2012-01-17 79 views
0

我有一個表trtd。我的td有一個div作爲它的孩子。其中一個divid="question",另一個有id="answer"。我想在遍歷我的td時,divid="answer"被隱藏。當頁面加載時,只會出現問題div。這裏是html的結構jQuery中的隱藏元素表

<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的是推棧上只應該隱藏,但是這不是真正的輸出。

+0

哦,那是錯誤的,對不起 – Basit 2012-01-17 12:21:27

+0

不要使用ID。因爲我看到這種結構可以重複。 ID是整個文檔的唯一標識符。而是使用類名。 – footy 2012-01-17 12:22:56

回答

5

如果您有多個行,您不應該使用多個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') 

...但這是辦法不多代碼,這麼簡單的東西

編輯A Sample of what you might be trying to do

+0

@davidethell Eirinn謝謝。我想問問,在這裏選擇類而不是id的唯一原因是,該id應該是唯一的?是的,你是對的,這個結構是重複的。在這種情況下,所有td的id = question,id = answer。所有的tds都有相同的類名而不是相同的id也很好嗎?謝謝 – Basit 2012-01-17 13:43:52

+0

@Basit:是的,不同的元素使用相同的類名是完全正常的。這使得CSS中的樣式也更容易。保持ID值唯一是非常好的做法。即使事情看起來可以用同一個ID也行,那麼以後的某些事情很可能不會正常工作;) – musefan 2012-01-17 14:05:23

+0

好的謝謝:)。非常感謝:) – Basit 2012-01-18 04:39:21

2

使用選擇器。

給所有的答案盒一類的「答案」

和使用:

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

這將隱藏所有他們的答案類。給他們打電話問題ID和答案類別:

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

我不是很熟悉表,但我希望答案有一定的價值。

編輯以反映評論。

+0

你的第二個選擇器,帶有「#Q1」,能夠這樣工作嗎? – musefan 2012-01-17 12:31:01

+0

它應該工作是:)如果它不,他們可能不得不交換。它在#Q1中尋找.answer。這種方法確實需要每個問題都有自己的ID ...#Q1,#Q2等等。 – Eirinn 2012-01-17 12:36:36

+0

是的,我得到了你想要做的,我只是認爲你必須把父母放在第一位,孩子第二...我可能是錯的,我從來沒有嘗試過... – musefan 2012-01-17 12:37:52

1

元素ID在文檔中是唯一的。這不是絕對必要的,但它會使你更容易處理你的元素。在你的情況下,我會改變你的所有問題,並將id屬性改爲類。然後你可以這樣做來隱藏你的答案:

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

嗯,如果給我的div class屬性,像'div class =「question」',那麼我如何檢查這個屬性。就像我在做'if($ div.id)',我不能做'if($ div.class)'。 ?謝謝 – Basit 2012-01-17 12:33:40

+1

'$ div'是一個JQuery元素,因此你可以做...'$ div.attr('class')' – musefan 2012-01-17 12:43:40