Jquery滚动到没有Id的元素，仅按数据属性滚动

Jquery Scroll to elements without Ids, only by data attributes

本文关键字：滚动 数据属性 元素 Id Jquery      更新时间：2023-09-26

我希望页面向下滚动到我的"容器"-li，它包装了我的当前元素。li没有id属性，并且不能用于HTML验证。每个li都有一个名为：data commentid的数据属性。这个属性包含一个GUID，是我在绑定卷轴时想要使用的。如何仅使用元素的数据属性滚动到该元素？

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并尝试使用它，但也没用。

关于标记，它非常复杂，所以我只向您展示我们需要的部分，以防止混淆。一个带有注释数据的包装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>

它应该如何向下滚动到淡出的内容？去除了褪色效果，它（ scrollTop: $self.offset().top）就像一个符咒。

相关文章：