>

유사한 질문이 있다는 것을 알고 있습니다. 모든 질문을 읽고 시나리오가 다릅니다.

항목 목록에 대한 필터를 작성 중입니다. 정렬되지 않은 목록의 형태로 3 세트의 드롭 다운이 있습니다 (일부 jQuery 작업에서 드롭 다운처럼 보입니다). 드롭 다운은 제품 목록을 필터링하는 데 사용되는 범주입니다.

드롭 다운의 각 항목을 클릭하면 '선택됨'클래스가 항목에 추가됩니다. 예는 다음과 같습니다.

<ul class="products-group">
    <li>
        <a href="#" class="selected">Group 1</a>
    </li>
    <li>
        <a href="#">Group 2</a>
    </li>
    <li>
        <a href="#">Group 3</a>
    </li>
    <li>
        <a href="#" class="selected">Group 4</a>
    </li>
    <li>
        <a href="#">Group 5</a>
    </li>
</ul>

위 코드에서 '그룹 1'과 '그룹 4'를 클릭 (선택)합니다. 필터 버튼을 클릭하면 선택한 항목을활성 필터로 목록 형식으로 출력하고 싶습니다.

그래서 다음과 같은 컨테이너를 만들었습니다 :

<div id="active-filters"></div>

이것은 내 jquery입니다.

$('.filter-btn').click(function () {
    var activeFilters = $('.products-group a.selected').text();
    $('#active-filters').html(activeFilters);
});

이 작동하지만 선택한 모든 항목을 긴 텍스트 문자열로 출력합니다. 선택한 각 항목을 분리하여 li 목록 항목으로 출력하려면 어떻게합니까?

.split () 메서드를 찾았지만 단어를 구분하고 단어 사이의 공백을 기준으로 구분하는 것이 가장 좋지 않을 수 있습니다. 예를 들어 그룹 1은 두 단어로 구성되며 두 단어 사이에 공백이 있지만 단일 항목입니다.


  • 답변 # 1

    .each() 사용  선택한 요소를 반복하고 <li> 를 추가  각각에 대해.

    var list = $("<ul>");
    $('.products-group a.selected').each(function() {
        list.append($("<li>", { text: $(this).text() }));
    });
    $("#active-filters").empty().append(list);
    
    

  • 답변 # 2

    추가하려고 했습니까? 이런 식으로

    $.each(activeFilters, function(index, Group) {
      $('#newlist').append('<li><a href="#">'+Group+'</a></li>')
    }
    
    

  • 답변 # 3

    이것을 시도하십시오

        $('.filter-btn').click(function () {
        var activeFilters = $('.products-group>li>a.selected');
        LIST=document.createElement("ul");
        for(i=0;i<activeFilters.length;i++){
        LI=document.createElement("li");
        TXT=$(activeFilters[i]).text();
        $(LI).text(TXT);
        $(LIST).append(LI);
        }
        $('#active-filters').html(LIST);
    });
    
    
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
     <ul class="products-group">
        <li>
            <a href="#" class="selected">Group 1</a>
        </li>
        <li>
            <a href="#">Group 2</a>
        </li>
        <li>
            <a href="#">Group 3</a>
        </li>
        <li>
            <a href="#" class="selected">Group 4</a>
        </li>
        <li>
            <a href="#">Group 5</a>
        </li>
    </ul>
     <div id="active-filters"></div>
     <a href="#" class="filter-btn">CLICK</a>
    
    

  • 이전 azure cognitive services - 맞춤형 비전 예측 API 사용
  • 다음 c# - HttpWebRequest, WebResponse 및 WebBrowser의 차이점