我希望页面向下滚动到我的“容器”-li,它包含我当前的元素。 li 没有 id 属性,并且它不能用于 HTML 验证目的。每个 li 都有一个名为:data-commentid 的数据属性,该属性包含一个 GUID,是我在绑定(bind)滚动时想要使用的属性。 如何仅使用元素的数据属性滚动到该元素?
var container = $("body").find(".roomWall.commentBox.publicListing:first");
var targets = $(container).find("li.commentInList.topLevelComment");
if ($.cookie('scrollTarget')) {
var cookieValue = $.cookie("scrollTarget").split('"');
var splittedStr = cookieValue[1];
$(targets).each(function () {
var $self = $(this);
if ($($self).attr("data-commentid") === splittedStr) {
var target = $("#" + splittedStr);
$($self).fadeOut("slow").hide().delay(500).queue(function (next) {
next();
}).delay(1000).queue(function (next) {
var $container = $("html,body");
$($container).animate({
scrollTop: $self.offset().top
}, 1000);
next();
}).delay(1000).queue(function () {
$($self).fadeIn(1000);
$(target).focus();
});
$.removeCookie("scrollTarget", { path: "/" });
}
});
}
cookie 包含我想要的 GUID。在我的 li ($self) 中,有一个 id={Some Guid} 的文本区域,在本例中指的是我的 $target 变量。因为我没能让它与 $self.offset().top 一起工作,所以我添加了 $scrollTo 并尝试使用它,但这也不起作用。
关于标记,它非常复杂,所以我只会向您展示我们需要的部分,以防止混淆。带有 data-commentId 的包装 li:
再往下我们有:
希望有人能找出我的代码哪里出了问题。
最佳答案
我建议使用 jQuery 的 filter()
而不是尝试将其连接起来。我还认为 $("html,body")
部分是有问题的地方为你而出。否则你的代码实际上是正确的:
var someGuid = "0003";
var $scrollTo = $("li.commentInList.topLevelComment").filter(function(i){
return $(this).data('commentid') === someGuid;
});
$(document.body).animate({
scrollTop: $scrollTo.offset().top
}, 1000);
li {
height: 10em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="commentInList topLevelComment" data-commentid="0001">Comment 1</li>
<li class="commentInList topLevelComment" data-commentid="0002">Comment 2</li>
<li class="commentInList topLevelComment" data-commentid="0003">Comment 3</li>
<li class="commentInList topLevelComment" data-commentid="0004">Comment 4</li>
<li class="commentInList topLevelComment" data-commentid="0005">Comment 5</li>
</ul>
关于javascript - Jquery滚动到没有Id的元素,仅通过数据属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31146922/