需要关于使用jQuery操作primeFaces表的帮助吗

我不熟悉jQuery。我有一张桌子。当它转换为html时。代码如下所示

<div id="FaqGridForm:faqGrid" class="ui-datatable ui-widget" style="height:450px;">
    <div id="FaqGridForm:faqGrid_paginatortop" class="ui-paginator ui-paginator-top   ui-widget-header ui-corner-tl ui-corner-tr" style="">
        <table>
            <thead>
                <tr>
                    <th id="FaqGridForm:faqGrid:j_idt66" class="ui-state-default"></th>
                </tr>
            </thead>
            <tbody id="FaqGridForm:faqGrid_data" class="ui-datatable-data">
                <tr id="FaqGridForm:faqGrid_row_0" class="ui-widget-content ui-datatable-even">
                    <td>
                        <div id="question">
                            <label style="color:#0074c7;font-size:15px;font-weight:bold"> Q:</label>
                            <img id="FaqGridForm:faqGrid:0:j_idt69" height="10" width="10" src="/TDAP/faces/javax.faces.resource/spacer/dot_clear.gif?ln=primefaces&amp;v=2.2.RC2">
                            <span style="color:#0074c7;font-weight:bold">Customizeddddd development functionality?</span>
                        </div>
                        <img id="FaqGridForm:faqGrid:0:j_idt72" 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">
                            <label style="color:#0074c7;font-size:15px;font-weight:bold"> A:</label>
                            <img id="FaqGridForm:faqGrid:0:j_idt75" height="10" width="10" src="/TDAP/faces/javax.faces.resource/spacer/dot_clear.gif?ln=primefaces&amp;v=2.2.RC2">
                            This activity executes the configuration, development,     iteration and creation of the Trade Portal elements as defined in the Design Phase. BearingPoint will customize and develop a..
                            <br>
                        </div>
                        <div class="horizontalline"></div>
                    </td>
                </tr>
                <tr id="FaqGridForm:faqGrid_row_1" class="ui-widget-content ui-datatable-odd">
                    <td>
                        <div id="question">
                            <img id="FaqGridForm:faqGrid:1:j_idt72" 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>
                </tr>
                <tr id="FaqGridForm:faqGrid_row_2" class="ui-widget-content ui-datatable-even">
                <tr id="FaqGridForm:faqGrid_row_3" class="ui-widget-content ui-datatable-odd">
                <tr id="FaqGridForm:faqGrid_row_4" class="ui-widget-content ui-datatable-even">
            </tbody>
        </table>
    </div>

但我的选择器不工作。我试图做的事情是，找到每一行，其中包含div id=answer的子td，并隐藏它

我做错了什么。正如我所说，我是新来的，这就是为什么我做错了

谢谢

已编辑 --------------------------------------------------------------------------

这是Primeface表

<div class="newsandupdates1">
    <div class="greyblock">
        <div class="block1" >
            <h:commandLink action="#{faqGrid.toHomePage}" value="Home"/> > FAQ <br></br>
            <br></br> <u><br></br></u>
            <div class="topright"><u> 
                <h:commandLink value="Add FAQ"  action="#{faqGrid.addNewFaq}"
                               rendered="#{faqGrid.showPanel}"/></u><br></br></div></div><br></br>
                <p:dataTable id="faqGrid" var="faqList" value="#{faqGrid.faqCategoryList}" paginator="true" rows="5" paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PageLinks} {LastPageLink} " height="400" paginatorPosition="top" style="height:450px;">

                    <p:column >
                        <div id="question">
                            <h:outputLabel value="Q:" style="color:#0074c7;font-size:15px;font-weight:bold"/>
                            <p:spacer width="10" height="10" />
                            <h:outputText value="#{faqList.question}" style="color:#0074c7;font-weight:bold"/>
                        </div>
                        <p:spacer width="480" height="10" />

                        <br></br><br></br>
                        <div id="answer">
                            <h:outputLabel value="A:" style="color:#0074c7;font-size:15px;font-weight:bold"/>
                            <p:spacer width="10" height="10" />
                            <h:outputText value="#{faqList.answer}"/><br></br>
                        </div>
                        <div class="horizontalline"></div>
                    </p:column>
                </p:dataTable>
            </div>
        </div>

>常见问题解答

首先，

id

在整个页面/表单中必须是唯一的！@Skyrim我编辑了我的代码以添加Primeface代码。你可以在那里看到。id是由Primeface生成的。HHmmm你的意思是说id应该是问题1，回答1，问题2，回答2，…问题n，回答n（n=1，2，3，…）.hhhmmm好的，我尝试更正。然后让你知道。@Skyrim我更正了代码。现在ID不同了。每个td中的ID现在看起来像这个定制的DDD开发功能？。此活动执行设计阶段定义的贸易门户元素的配置、开发、迭代和创建。BearingPoint将自定义并开发一个..现在索引不同了。现在我如何制作选择器？我尝试了这个，但我被困在了一个点上。我得到了span数组，但我尝试从数组中获取值，然后什么都没有发生。请告诉我我做错了什么。

var$spanArray=$（this）。children（'span'））

这给了我类似的东西

[span#FaqGridForm:faqGrid:0:question，span#FaqGridForm:faqGrid:0:answer]

现在我有了一个包含两个span的数组，但我尝试了这个，什么都没有发生。each（）。

$spanArray.each（函数（索引）{var$span=$（This.get（index）；var$span2=$span；}）；

。如何从数组中获取span，然后获取其id和id值。Thanksher我至少要通过它，使用这个

var$spanArray=$（this）。children（'span'）；var length=$spanArray.length；$。each（$spanArray，function（index，value）{alert（index+'：'+value）；var spanId=value.id；}）

首先，

id

在整个页面/表单中必须是唯一的！@Skyrim我编辑了我的代码以添加Primeface代码。你可以在那里看到。id是由Primeface生成的。HHmmm你的意思是说id应该是question1，answer1，question2，answer2，…questionn，answern（n=1，2，3，…）.hhhmmm好的，我尝试更正。然后让你知道。@Skyrim我更正了代码。现在ID不同了。每个td中的ID现在看起来像这个定制的DDD开发功能？。此活动执行设计阶段定义的贸易门户元素的配置、开发、迭代和创建。BearingPoint将自定义并开发一个..现在索引不同了。现在我如何制作选择器？我尝试了这个，但我被困在了一个点上。我得到了span数组，但我尝试从数组中获取值，然后什么都没有发生。请告诉我我做错了什么。

var$spanArray=$（this）。children（'span'））

这给了我类似的东西

[span#FaqGridForm:faqGrid:0:question，span#FaqGridForm:faqGrid:0:answer]

现在我有了一个包含两个span的数组，但我尝试了这个，什么都没有发生。each（）。

$spanArray.each（函数（索引）{var$span=$（This.get（index）；var$span2=$span；}）；

。我如何从数组中获取span，然后获取其id和id值。感谢您，我至少要用这个

var$spanArray=$（this.children（'span'）；var length=$spanArray.length；$。each（$spanArray，function（index，value）{alert（index+'：'+value）；var spanId=value.id；}）；

<div class="newsandupdates1">
    <div class="greyblock">
        <div class="block1" >
            <h:commandLink action="#{faqGrid.toHomePage}" value="Home"/> > FAQ <br></br>
            <br></br> <u><br></br></u>
            <div class="topright"><u> 
                <h:commandLink value="Add FAQ"  action="#{faqGrid.addNewFaq}"
                               rendered="#{faqGrid.showPanel}"/></u><br></br></div></div><br></br>
                <p:dataTable id="faqGrid" var="faqList" value="#{faqGrid.faqCategoryList}" paginator="true" rows="5" paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PageLinks} {LastPageLink} " height="400" paginatorPosition="top" style="height:450px;">

                    <p:column >
                        <div id="question">
                            <h:outputLabel value="Q:" style="color:#0074c7;font-size:15px;font-weight:bold"/>
                            <p:spacer width="10" height="10" />
                            <h:outputText value="#{faqList.question}" style="color:#0074c7;font-weight:bold"/>
                        </div>
                        <p:spacer width="480" height="10" />

                        <br></br><br></br>
                        <div id="answer">
                            <h:outputLabel value="A:" style="color:#0074c7;font-size:15px;font-weight:bold"/>
                            <p:spacer width="10" height="10" />
                            <h:outputText value="#{faqList.answer}"/><br></br>
                        </div>
                        <div class="horizontalline"></div>
                    </p:column>
                </p:dataTable>
            </div>
        </div>

/*
 * When we write jQuery plugins we, of course, must assume that the jQuery library is  loaded. We
 * cannot assume, however, that the $ alias is available. Recall that the $.noConflict() method can
 * relinquish control of this shortcut. To account for this, our plugins should always call jQuery
 * methods using the full jQuery name or internally define $ themselves.
 *
 * Especially in longer plugins, many developers find that the lack of the $ shortcut makes code
 * more difficult to read. To combat this, the shortcut can be locally defined for the scope of the
 * plugin by defining a function and immediately invoking it. This syntax for defining and invoking
 * a function at once, often referred to as an Immediately Invoked Function Expression (IIFE),
 * looks like the following code snippet:
 *
 * The wrapping function takes a single parameter, to which we pass the global jQuery object. The
 * parameter is named $, so within the function we can use the $ alias with no conflicts.
 *
 * The .ready() method has one more trick up its sleeve to help us in this situation.
 * The callback function we pass to it can take a single parameter: the jQuery object itself. This
 * allows us to effectively rename it without fear of conflicts, as shown in the following code snippet:

   jQuery(document).ready(function($) {
       // In here, we can use $ like normal!
   });
 *
 * Or, using the shorter syntax we learned in the preceding code:

     jQuery(function($) {
       // Code that uses $.
     });
 */

(function($){

    $('#faqGrid tr td').each(function(){

        var $td = $(this)
        $td.children('div .answer').hide();

//        **
//        *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.attr('class')) {
//
//               var $divClass = $div.attr('class');
//
//               if ($divClass == 'answer') {
//
//                  var colNum = $(this).cellIndex;
//                  //$cells = $cells.add($div);
//                  $(value).hide();
//
//               } //end of if ($divId == 'answer')
//
//           } //end of if ($div.id)
//
//        }); //end of  $.each(object, fn)
//
//        //return $(this).pushStack($cells);
//
    }); //end of $('#faqGrid tr td').each(fn)

   /**
    * The .toggle() event method takes two or more arguments, each of which is a function. The first
    * click on the element causes the first function to execute; the second click triggers the
    * second function, and so forth. Once each function has been invoked, the cycle begins again
    * from the first function.
    */
   $('#faqGrid tr td').toggle(function(){

       var $td = $(this)
       $td.children('div .answer').addClass('selected').slideDown('slow', function(){

           $td.children('div .question').slideUp('slow').hide();

      });

   }, function(){

       var $td = $(this)
       $td.children('div .question').addClass('selected').slideDown('slow', function(){

           $td.children('div .answer').slideUp('slow').hide();

        });

    }); //end of $('#faqGrid tr td').toggle

})(jQuery); //end of (function($)