个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
26
4
这类似于我的 last question .抱歉，我不知道我是否可以编辑相同的问题。
这是我的要求。我的 HTML 有以下部分
<ul class="products-grid">
<li class="item">
<div class="quickview-btn" data-pid="101" style="opacity: 0;">Quick View</div>
<!-- some other elements -->
</li>
<li class="item">
<div class="quickview-btn" data-pid="107" style="opacity: 0;">Quick View</div>
<!-- some other elements -->
</li>
<li class="item">
<div class="quickview-btn" data-pid="123" style="opacity: 0;">Quick View</div>
<!-- some other elements -->
</li>
<li class="item">
<div class="quickview-btn" data-pid="145" style="opacity: 0;">Quick View</div>
<!-- some other elements -->
</li>
“我有 n 个这样的未排序列表”
当我点击一个“.quickview-btn”div 时，我应该得到下一个和上一个(如果存在)“.quickview-btn”div 的“data-pid”值，不管它们在下一个 ul 中或以前的 ul。
note: I cannot modify the html structure as i do many other operations keeping this structure in mind. so I cannot put all the li's in a single ul.
因为我是 jQuery 的新手，所以我一无所知。谁能帮我解决这个问题？
最佳答案
你可以在 .products-grid divs 中找到所有 .quickview-btn div这个:
var btns = $(".products-grid .quickview-btn");
然后找到被点击的索引:
var index = btns.index(this);
然后你可以使用 -1 和 +1 来获取上一个和下一个，不管 ul 他们在:
var prev = btns.eq(index - 1).attr('data-pid');
var next = btns.eq(index + 1).attr('data-pid');
prev 将是第一个按钮的 undefined。 next 最后一个将是 undefined。
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset=utf-8 />
<title>Grid Clicks</title>
<style>
.quickview-btn {
display: inline-block;
text-decoration: underline;
color: blue;
}
</style>
</head>
<body>
<ul class="products-grid">
<li class="item">
<div class="quickview-btn" data-pid="101">Quick View</div>
101
</li>
<li class="item">
<div class="quickview-btn" data-pid="107">Quick View</div>
107
</li>
<li class="item">
<div class="quickview-btn" data-pid="123">Quick View</div>
123
</li>
<li class="item">
<div class="quickview-btn" data-pid="145">Quick View</div>
145
</li>
</ul>
<ul class="products-grid">
<li class="item">
<div class="quickview-btn" data-pid="201">Quick View</div>
201
</li>
<li class="item">
<div class="quickview-btn" data-pid="207">Quick View</div>
207
</li>
<li class="item">
<div class="quickview-btn" data-pid="223">Quick View</div>
223
</li>
<li class="item">
<div class="quickview-btn" data-pid="245">Quick View</div>
245
</li>
</ul>
<script>
(function($) {
$(".products-grid .quickview-btn").click(function() {
var btns = $(".products-grid .quickview-btn");
var index = btns.index(this);
var prev = btns.eq(index - 1).attr('data-pid');
var next = btns.eq(index + 1).attr('data-pid');
alert(
"You clicked: " + $(this).attr('data-pid') +
"\nPrev: " + prev +
"\nNext: " + next
);
});
})(jQuery);
</script>
</body>
</html>
在下面的评论中你说:
...but clicking next for last "quickview-btn" doesn't get first "quickview-btn" data-pid. May I know why is that?
因为上面没有任何内容来实现包装。它不会神奇地发生。
如果要换行:Live Example | Live Source
var btns = $(".products-grid .quickview-btn");
var index = btns.index(this);
var count = btns.length;
var prev = btns.eq((index + (count - 1)) % count).attr('data-pid');
var next = btns.eq((index + 1) % count).attr('data-pid');
关于javascript - 如何找到一个元素而不考虑其级别？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16998035/
26
4
0
例如，我有一个父类Author: class Author { String name static hasMany = [ fiction: Book,
代码如下: dojo.query(subNav.navClass).forEach(function(node, index, arr){ if(dojo.style(node, 'd
我有一个带有 Id 和姓名的学生表和一个带有 Id 和 friend Id 的 Friends 表。我想加入这两个表并找到学生的 friend 。 例如，Ashley 的 friend 是 Saman
我通过互联网浏览，但仍未找到问题的答案。应该很容易: class Parent { String name Child child } 当我有一个 child 对象时，如何获得它的 paren
我正在尝试创建一个以 Firebase 作为我的后端的社交应用。现在我正面临如何(在哪里？)找到 friend 功能的问题。 我有每个用户的邮件地址。 我可以访问用户的电话也预订。 在传统的后端中，我
我主要想澄清以下几点: 1。有人告诉我，在 iOS 5 及以下版本中，如果您使用 Game Center 设置多人游戏，则“查找 Facebook 好友”(如与好友争夺战)的功能不是内置的，因此您需要
关于redis docker镜像ENTRYPOINT脚本 docker-entrypoint.sh : #!/bin/sh set -e # first arg is `-f` or `--some-
我是一名优秀的程序员,十分优秀！