javascript - 显示div类的index()

标签 javascript jquery

当用户只想查看带有该标签的故事时，我有一堆 .post div 接收 .displayOnly 类。我想要做的是为每个帖子显示一条消息，其类别为“.displayOnly”，我正在显示该消息，其中显示消息中的索引号+ 1。这个想法是，该消息将表达“显示 3 中的 1”、“显示 3 中的 2”等效果。我已经尝试使用 index() 函数来实现此目的，但对于每条消息，我始终得到相同的结果，即“显示 3 条中的 1 条”。

我在下面包含了我的代码。有人能告诉我哪里出了问题吗？

$('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 示例。如果它能够确定 length() 我不确定为什么索引(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&#8230;<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&#160;&#187;</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 &raquo;<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;">&nbsp;</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&#8230;<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&#160;&#187; </a><br/></p> <a href="http://americaswild.tumblr.com/post/111991702182/connection-with-nature-can-happen-anywhere-even">
</a><br />
<h4>#urbanwildliferefuges &raquo;<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;">&nbsp;</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&amp;enablejsapi=1&amp;origin=https://safe.txmblr.com&amp;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># &raquo;<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;">&nbsp;</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&#160;&#187;</a></p> <a href="http://americaswild.tumblr.com/post/111991128157/14-urban-wildlife-refuge-partnerships">
</a><br />
<h4>#urbanwildliferefuges &raquo;<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;">&nbsp;</div>
<hr />
</div>

最佳答案

您没有将 currentItem 设置为被单击元素的索引，而是将其设置为与 .displayOnly 匹配的第一个元素的索引选择器。要引用事件的目标，请使用$(this)。由于 displayOnly 类位于包含的 DIV 上，因此请使用 .closest() 来查找它。

$(this).closest('div').index('.displayOnly');

由于每个 DIV 中都有一个 .itemCount 元素，因此您应该使用 .find() 来仅选择同一 DIV 中的元素。

$('.displayOnly h4').click(function() {
  var numItems = $('.displayOnly').length;
  var curDiv = $(this).closest('div.displayOnly');
  var currentItem = curDiv.index('.displayOnly') + 1;

  if (numItems > 0) {
    curDiv.find("p.itemCount").show().html("Displaying " + currentItem + " of " + numItems + ".");
  } else {
    curDiv.find("p.itemCount").hide().empty();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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&#8230;<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&#160;&#187;</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 &raquo;<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;">&nbsp;</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&#8230;<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&#160;&#187; </a>
    <br/>
  </p>
  <a href="http://americaswild.tumblr.com/post/111991702182/connection-with-nature-can-happen-anywhere-even">
  </a>
  <br />
  <h4>#urbanwildliferefuges &raquo;<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;">&nbsp;</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&amp;enablejsapi=1&amp;origin=https://safe.txmblr.com&amp;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># &raquo;<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;">&nbsp;</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&#160;&#187;</a>
  </p>
  <a href="http://americaswild.tumblr.com/post/111991128157/14-urban-wildlife-refuge-partnerships">
  </a>
  <br />
  <h4>#urbanwildliferefuges &raquo;<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;">&nbsp;</div>
  <hr />
</div>

关于javascript - 显示div类的index()，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28820533/

上一篇：javascript - 当 View 以模型默认值声明时，不会触发事件

下一篇：javascript - Backbone.js 路由和滚动位置

相关文章：

javascript - Bootstrap 按钮组 + 单选按钮，检查值在使用 jQuery 的 Firefox 中不起作用

javascript - 用高阶组件装饰导入的 React 组件

javascript - 在javascript中显示相关产品

javascript - Jquery 引用字符串

jquery 在父级中添加类

javascript - hashchange 事件未在简单 spa 中使用 jquery 触发

javascript - 将 jQuery 的 .data() 方法应用于选定元素组会产生什么效果？

javascript - 在 ASP.NET MVC 应用程序中使用 AngularJS 发布表单

javascript - 如何检查 html 表中的 hasClass

javascript - 使用JS创建 "link"到受密码保护的站点

©2024 IT工具网  联系我们