홈>2020-02-01 00:33

jquery - 선택한 항목의 텍스트를 가져 와서 목록에 넣습니다

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

항목 목록에 대한 필터를 작성 중입니다. 정렬되지 않은 목록의 형태로 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은 두 단어로 구성되며 두 단어 사이에 공백이 있지만 단일 항목입니다.

jquery

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

Python2.net

jquery - 선택한 항목의 텍스트를 가져 와서 목록에 넣습니다

관련 자료