我有一堆.post divs,當用戶只想查看帶有該標籤的故事時,它接受.displayOnly的類。我想要做的是爲每個帖子顯示一條消息,其中顯示了「.displayOnly」類,其中顯示了消息中的索引號+ 1。這個想法是,這個消息會對「顯示3中的1」,「顯示3中的2」等等的影響說些什麼。我已經嘗試過使用index()函數,但對於每個顯示「顯示1」的消息,我總是得到相同的結果。顯示div類的索引()
我在下面列出了我的代碼。有人能告訴我我要去哪裏嗎?
$('h4').click(function() {
var numItems = $('.displayOnly').length;
var currentItem = $('.displayOnly').index() + 1;
if ($('.displayOnly').length > 0) {
$("p.itemCount").css('cssText', 'display:block;');
$("p.itemCount").append("Displaying " + currentItem + " of " + numItems + ".");
} else {
$("p.itemCount").css('cssText', 'display:none;');
$("p.itemCount").empty();
}
});
更新:這裏是腳本引用HTML的樣本。如果它能夠確定長度()我不確定爲什麼索引(this)不起作用。
<div class="post urbanwildliferefuges displayOnly">
<p class="date">Tuesday, Feb 24, 2015 - 6:17 PM EST</p>
<h1>Urban Refuges Make it Easier for All People to Get their ‘Nature Fix’</h1>
<p>Debbie Pike is the Visitors Services Manager for Northern New Mexico National Wildlife Refuge Complex (<a href="http://www.fws.gov/refuge/las_vegas/" target="_blank">Las Vegas</a>, <a href="http://www.fws.gov/refuge/rio_mora/" target="_blank">Rio Mora</a> and <a href="http://www.fws.gov/refuge/maxwell/" target="_blank">Maxwell</a> National Wildlife Refuges). 「I work with a ‘high energy’ Friends group that…<a href="http://www.fws.gov/news/blog/index.cfm/2015/1/16/Urban-Refuges-Make-it-Easier-for-All-People-to-Get-their-Nature-Fix" target="_blank">Read more here »</a> <br/></p> <a href="http://americaswild.tumblr.com/post/111992041452/urban-refuges-make-it-easier-for-all-people-to-get">
</a><br />
<h4>#urbanwildliferefuges »<br /><span style="font-weight:300; font-style:italic; font-size:.85em !important;">See more like this</span></h4>
<p class="itemCount"></p>
<div style="float:none; clear:both;"> </div>
<hr />
</div>
<div class="post urbanwildliferefuges displayOnly">
<p class="date">Tuesday, Feb 24, 2015 - 6:12 PM EST</p>
<h1>Connection with Nature Can Happen Anywhere, Even in a City</h1>
<p>Georgia Basso is a wildlife biologist in our <a href="http://www.fws.gov/northeast/ecologicalservices/coastal.html" target="_blank">Coastal Program</a> and the Service’s liaison to the <a href="http://longislandsoundstudy.net/" target="_blank">Long Island Sound Study</a>, an EPA National Estuary Program to restore and protect…<a href="http://www.fws.gov/news/blog/index.cfm/2015/1/12/Connection-with-Nature-Can-Happen-Anywhere-Even-in-a-City" target="_blank">Read more here » </a><br/></p> <a href="http://americaswild.tumblr.com/post/111991702182/connection-with-nature-can-happen-anywhere-even">
</a><br />
<h4>#urbanwildliferefuges »<br /><span style="font-weight:300; font-style:italic; font-size:.85em !important;">See more like this</span></h4>
<p class="itemCount"></p>
<div style="float:none; clear:both;"> </div>
<hr />
</div>
<div class="post ">
<p class="date">Tuesday, Feb 24, 2015 - 6:06 PM EST</p>
<h1>Secretary Talking about the Urban Wildlife Refuge Program</h1>
<figure class="tmblr-embed" data-provider="youtube" data-orig-width="540" data-orig-height="304" data-url="http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D6PaoZViLBPc%26list%3DUUMqPAPfBGsDMs2UiD-5Tbbg"><iframe width="500" height="281" id="youtube_iframe" src="https://www.youtube.com/embed/6PaoZViLBPc?feature=oembed&enablejsapi=1&origin=https://safe.txmblr.com&wmode=opaque" frameborder="0" allowfullscreen=""></iframe></figure> <a href="http://americaswild.tumblr.com/post/111991188777/secretary-talking-about-the-urban-wildlife-refuge">
</a><br />
<h4># »<br /><span style="font-weight:300; font-style:italic; font-size:.85em !important;">See more like this</span></h4>
<p class="itemCount"></p>
<div style="float:none; clear:both;"> </div>
<hr />
</div>
<div class="post urbanwildliferefuges displayOnly">
<p class="date">Tuesday, Feb 24, 2015 - 6:05 PM EST</p>
<h1>14 URBAN WILDLIFE REFUGE PARTNERSHIPS</h1>
<p>From Albuquerque to Yonkers and many cities in between, theU.S. Fish and Wildlife Service is spreading its conservation message. <a href="http://www.fws.gov/refuges/RefugeUpdate/NovDec_2014/14_urban.html" target="_blank">Click here to read more »</a></p> <a href="http://americaswild.tumblr.com/post/111991128157/14-urban-wildlife-refuge-partnerships">
</a><br />
<h4>#urbanwildliferefuges »<br /><span style="font-weight:300; font-style:italic; font-size:.85em !important;">See more like this</span></h4>
<p class="itemCount"></p>
<div style="float:none; clear:both;"> </div>
<hr />
</div>
從jquery的文檔:'如果沒有參數被傳遞給所述的.index()的方法,所述返回值是指示jQuery對象相對於所述內的第一元素的位置的整數。它的同樣的元素.'所以'var currentItem = $('。displayOnly')。index()+ 1;'始終是1. – albciff 2015-03-02 22:23:33
從.index()的jquery文檔.....在那裏它們使用的示例.. 。(「div」).index(this);嘗試在括號之間添加關鍵字this。 – floor 2015-03-02 22:26:15
'$(「。displayOnly」)。index(this)+ 1' – adeneo 2015-03-02 22:27:00