如何使用java脚本或jQuery基于相同的特定css属性对元素进行分组

How to group elements based on same specific css attribute using java script or jQuery?

本文关键字：属性 css 元素 脚本 java 何使用 jQuery 于相同      更新时间：2023-09-26

我正在处理一个返回的页面，其中我有许多具有相同css属性值的标记，我想看看我有多少类型的不同值的特定css属性。

<p style="position:absolute;left:387.5px;top:204px">1</p>
<p style="position:absolute;left:47.5px;top:204px">2</p>

&

<p style="position:absolute;left:387.5px;top:500px">1</p>
<p style="position:absolute;left:47.5px;top:500px">1</p>

我希望我应该得到两种类型的值204和500作为相同css属性'top'的结果！

您可以使用$.map()、$.unique()、.filter()、.css()

$(function() {
  $.map(
    // filter unique `css` `top` values, remove duplicates
    $.unique(
      // return `css` `top` values
      $.map($("p"), function(el) {
        return $(el).css("top")
      })
    ), function(val, key) {
      // create new container for grouping elements 
      // having same `css` `top` value
      $("<div>", {
          // filter `p` elements having same `css` `top` value
          html: $("p").filter(function() {
            return $(this).css("top") === val
          })
        })
        // append container `div` to `body`
        .appendTo("body")
    })
})
}
) div {
  border: 1px solid blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<p style="position:absolute;left:387.5px;top:204px">1</p>
<p style="position:absolute;left:387.5px;top:500px">1</p>
<p style="position:absolute;left:47.5px;top:204px">2</p>
<p style="position:absolute;left:47.5px;top:500px">1</p>

你可以通过这样的方式实现你想要的：

    var jqObj = $('p');
    var grupObj = {};
    groupBy('top');
    function groupBy(attr) {
        /// creating an object that will containt all the elements, this object will group the elements with the same attribute value in an array
        jqObj.each(function (idx, el) {
            var atrVal = el.style[attr];
            if (!grupObj[atrVal]) {
                grupObj[atrVal] = [];
            }
            grupObj[atrVal].push(el);
        });
        //going trough all the 'groups'
        for (var group in grupObj) {
            var grpArray = grupObj[group];
            var grpDiv = $('<div><div>');
            //appending each element to one container
            for (var i = 0; i < grpArray.length; i++) {
                grpDiv.append(grpArray[i]);
            }
            //adding the div container to the body
            $('body').append(grpDiv);
        }
    }
相关文章：