>

항목의 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로 상자를 표시하는 방법을 알려주시겠습니까?


  • 답변 # 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>
    
    

    코드 펜

  • 이전 mysql - Slick의 장기 거래
  • 다음 Visual Studio 단위 테스트 중 웹 구성 앱 설정 값이 널입니다