홈>2020-02-01 00:31

javascript - 동일한 유형의 항목 그룹화 및 표시

항목의 listView가 있으며 이러한 항목은 클래스를 기준으로 그룹화되어 상자와 함께 표시됩니다.

5 개 항목이 있다고 가정합니다 :

<div class="1"></div>
<div class="1"></div>
<div class="2"></div>
<div class="3"></div>
<div class="3"></div>

유사한 항목을 표시하려면 이와 같은 상자가 필요합니다.

클래스가 1 인 ViewModel에 새 항목을 추가하면 상자에서 첫 번째 상자에 새 항목을 추가해야합니다.

같은 클래스를 가진 항목을 그룹화하는 방법과 같은 클래스를 가진 항목에 CSS로 상자를 표시하는 방법을 알려주시겠습니까?

javascript jquery css

답변 # 1
일부 jQuery를 사용하여 클래스 이름이 일치하는 모든 요소를 래퍼로 래핑 할 수 있습니다.
```
var elems = $('div').map(function() {
    return $(this).attr('class');
});
$.unique(elems).each(function(i, el) {
    $('.'+el).wrapAll('<div class="wrapper"></div>');
});
```
그런 다음 CSS를 .wrapper 클래스에 적용하거나 원하는 이름을 지정할 수 있습니다.

여기 코드 펜 예제가 있습니다.

답변 # 2

div 안에 추가 요소를 추가 할 수 있다면 항상 이런 식으로 가짜를 만들 수 있습니다. psuedo 요소를 사용하여 비슷한 효과를 얻을 수 있습니다. 필요한 것에 따라 그림자를 사용하여 테두리를 만들 수도 있습니다. :)

CSS

* {
  font-size: 0;
  box-sizing: border-box;
}
[class^="class"] {
  display: inline-block;
  width: 20%;
  background: red;
  padding: 10px;
}
.inner {
  background: blue;
  font-size: 16px;
}
.class1 {
  background: green;
}
.class3 {
  background: purple;
}

HTML

<div class="class1"><div class="inner">1</div></div>
<div class="class1"><div class="inner">1</div></div>
<div class="class2"><div class="inner">2</div></div>
<div class="class3"><div class="inner">3</div></div>
<div class="class3"><div class="inner">3</div></div>

코드 펜

Python2.net

javascript - 동일한 유형의 항목 그룹화 및 표시

관련 자료