홈>
유사한 질문이 있다는 것을 알고 있습니다. 모든 질문을 읽고 시나리오가 다릅니다.
항목 목록에 대한 필터를 작성 중입니다. 정렬되지 않은 목록의 형태로 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
-
답변 # 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>
관련 자료
- python - for 루프 내부의 텍스트 길이를 얻는 방법
- angular - Observable에서 올바른 데이터를 얻는 방법
- sql - db2 z/os - 연도의 마지막 2 자리를 가져옵니다
- javascript - Fabricjs에서 선택한 항목으로 ID를 얻는 방법
- kubernetes - 포드의 디스크 장치에 액세스하는 방법은 무엇입니까?
- Bash를 사용하여 파일에서 특정 텍스트를 가져 오는 방법
- excel - 웹 페이지에서 이미지 URL을 가져 오는 방법
- html - div 하단의 텍스트
- excel - 'AND'및 'OR'을 사용하여 행 수를 어떻게 얻을 수 있습니까?
- python 3.x - 웹 스크랩을 통해 ajax로 만든 그래프에서 텍스트 가져 오기
- python - 패턴 grep에없는 모든 것을 얻는 방법
- kotlin - Android의 내 편집 텍스트가 편집 텍스트에서 텍스트를 가져올 수 없습니다
- bash - (정규식) 내에서 텍스트를 파일로 만드는 방법
- python - discordpy 인 텐트가 작동하도록하려면 어떻게해야합니까?
- .htaccess - PHP에서 $_GET을 사용하여 htaccess에서 PATH 가져 오기
- c# - 텍스트 파일에서 읽은 다음 평균을 계산하는 방법
- python - 0 일부터 시작하여 매 3 번째 날짜를 얻는 방법
- Java 배열 목록의 합계를 얻는 방법은 무엇입니까?
- xamarin.forms - 왼쪽에서 레이블 텍스트 자르기
- google bigquery - 모든 값의 합계를 얻는 방법은 무엇입니까?
트렌드
- OpenCv의 폴더에서 여러 이미지 읽기 (python)
- 파이썬 셀레늄 모든 "href"속성 가져 오기
- git commit - 자식 - 로컬 커밋 된 파일에 대한 변경을 취소하는 방법
- html - 자바 스크립트 - 클릭 후 변경 버튼 텍스트 변경
- JSP에 대한 클래스를 컴파일 할 수 없습니다
- javascript - 현재 URL에서 특정 div 만 새로 고침/새로 고침
- jquery - JavaScript로 현재 세션 값을 얻으시겠습니까?
- javascript - swiperjs에서 정지, 재생 버튼 추가
- vue.js - axios를 사용하여 서버에 이미지를 업로드하는 방법
- python - 문자열에서 특정 문자 제거
.each()
사용 선택한 요소를 반복하고<li>
를 추가 각각에 대해.