属性排序找出最大，并在相应li上添加样式

最新推荐文章于 2022-02-28 00:31:55 发布

原创最新推荐文章于 2022-02-28 00:31:55 发布 · 173 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #js #jq #字符串拼接

随笔小记专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种使用JavaScript和jQuery的方法来查找并显示HTML列表中带有最大数值tag属性的元素。通过使用Math.max结合apply、map及filter等方法，实现了筛选出具有最大tag属性值的列表项，并使这些项中的特定元素可见。

直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hot{
            display: none;
        }
    </style>
</head>
<body>
<ul class="Classroom_list">
    <li tag="1">
        <span class="hot"></span>
    </li>
    <li tag="2">
        <span class="hot"></span>
    </li>
    <li tag="4">
        <span class="hot"></span>
    </li>
    <li tag="4">
        <span class="hot"></span>
    </li>
</ul>
<script>
    //方法一
    var $lis = $(".Classroom_list li");
    var max = Math.max.apply(null,$lis.toArray().map(function(li){ return +$(li).attr("tag")}));
    $lis.filter("[tag=" + max + "]").find(".hot").css("display","block");
    //方法二
    $('<style>[tag="' + Math.max.apply(null, $(".Classroom_list li").toArray()
        .map(function(li){ return +$(li).attr("tag")})) + '"] .hot{ display:block !important;}</style>').appendTo('head');
    //方法三
    $('<style>[tag="' + $(".Classroom_list li").toArray().reduce(function(max,cur){ return +$(cur).attr("tag") > max ? +$(cur).attr("tag") : max; }, 0) + '"] .hot{ display:block !important;}</style>').appendTo('head');
    //ECM6语法
    //$('<style>[tag="' + Math.max(...$(".Classroom_list li").toArray().map(p => +$(p).attr("tag"))) + '"] .hot{ display:block !important;}</style>').appendTo('head');
</script>
</body>
</html>

用的的知识点有，filter Math.max apply toArray map reduce 字符串拼接 appendTo等基础知识