我是jQuery的新手。我有PrimeFaces dataTable。当它被转换为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&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&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&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&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>
我只显示了第一个 tr ，它在扩展模式下的样子。剩下的都是一样的。现在我希望在我的页面加载时。然后所有 div id =“answer 。不应该是可见的。所以当页面加载时只显示 div id =”question“ 。 现在，当您点击问题时，只显示 div 的行 id = answer ，并且问题隐藏。如果您再次单击答案，则会出现 div id =“question 的行，并回答隐藏。
我试过这个
(function($){
$('#FaqGridForm\\:faqGrid tbody').find('tr:has(td)').each(function(){
var $tr = $(this);
var $td = $tr.children().find(':has(div #answer)');
return $td;
}).hide();
$('td').click(function(){
//var colIndex = $(this).parent().children().index($(this));
var $clickedItem = $(this);
var parent = $clickedItem.parent();
var children = parent.children();
var index = children.index($clickedItem);
var $rowClickedItem = $(this);
var rowParent = $rowClickedItem.parent();
var parent1 = rowParent.parent();
var children1 = parent1.children();
var rowIndex = children1.index(rowParent);
var rowIndex2 = children1.index(rowParent);
//var rowIndex = $(this).parent().parent().children().index($(this).parent());
alert('Row: ' + rowIndex + ', Column: ' + colIndex);
});
})(jQuery); //end of (function($)
但我的选择器无效。我想要做的是，找到每一行，其中包含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>
答案 0 :(得分：1)
/*
* 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($)