Jquery 滚动到没有 ID 的元素，仅通过数据属性

Question

我希望页面向下滚动到我的 "container"-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 并尝试了那个，但它也没有用。

关于Markup，比较复杂所以我只展示我们需要的部分，以免混淆。带有 data-commentId 的包装 li:

在层次结构的更下方，我们有：

希望有人能找出我的代码在哪里出错。

Answer 1

我建议使用 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>

Answer 2

如何向下滚动到淡出的内容？删除了褪色效果，它 ( scrollTop: $self.offset().top) 非常有效。

Jquery 滚动到没有 ID 的元素，仅通过数据属性

Jquery Scroll to elements without Ids, only by data attributes

javascript

jquery

animation

scroll

data-annotations