코드랩 레퍼런스

.slice() 본문

JQUERY

.slice()

webstoryboy 2017. 6. 5. 13:06

.slice() 메서드는 선택한 요소에 지정한 인덱스를 선택합니다.

Definition

  • .slice() 메서드는 선택한 요소에 지정한 인덱스를 선택합니다.

Syntax

$(selector).slice(start, end);

Compatibility

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 안드로이드 아이콘 ios 아이콘 익스플로러6 아이콘 6 익스플로러7 아이콘 7 익스플로러8 아이콘 8 익스플로러9 아이콘 9 익스플로러10 아이콘 10 익스플로러11 아이콘 11 엣지 아이콘
.slice()

Sample1 .slice() 메서드 예제입니다.

필터링(Filtering)

  • .eq() : 인덱스 번호에 해당하는 요소를 찾습니다.
  • .filter() : 선택된 요소 집합에서 선택자를 추가하거나 함수를 사용해서 원하는 결과를 추출해냅니다.
  • .first() : 선택된 요소 집합에서 첫번째 자식 요소를 찾습니다.
  • .has() : 선택된 요소들이 자신의 자식 요소에서 주어진 선택자가 있는지를 확인하여 범위를 축소합니다.
  • .is() : 문서 객체의 특징을 판별합니다.
  • .last() : 선택된 노드 집합에서 마지막 자식 요소를 찾습니다.
  • .map() : 대상이 되는 요소 집합의 배열을 새롭게 변경합니다.
  • .not() : 조건에 맞지 않은 것들만 찾아서 선택합니다.
  • .slice() : 선택된 집합을 조건의 범위로 재선택해줍니다.
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>제이쿼리(jQuery)</title>
        <style>
			li.on{padding: 4px 4px 2px 10px; font-size: 90%; color: #c7254e; white-space: nowrap; background-color: #f9f2f4; border-radius: 4px; border:1px dashed #a51a3d;}
			</style>
    </head>
    <body>
		<h3>필터링(Filtering)</h3>
		<div class="list">
			<ul>
				<li class="one1">.eq() : 인덱스 번호에 해당하는 요소를 찾습니다.</li>
				<li class="one2">.filter() : 선택된 요소 집합에서 선택자를 추가하거나 함수를 사용해서 원하는 결과를 추출해냅니다.</li>
				<li class="one3">.first() : 선택된 요소 집합에서 첫번째 자식 요소를 찾습니다.</li>
				<li class="one4">.has() : 선택된 요소들이 자신의 자식 요소에서 주어진 선택자가 있는지를 확인하여 범위를 축소합니다.</li>
				<li class="one5">.is() : 문서 객체의 특징을 판별합니다.</li>
				<li class="one6">.last() : 선택된 노드 집합에서 마지막 자식 요소를 찾습니다.</li>
				<li class="one7">.map() : 대상이 되는 요소 집합의 배열을 새롭게 변경합니다.</li>
				<li class="one8">.not() : 조건에 맞지 않은 것들만 찾아서 선택합니다.</li>
				<li class="one9">.slice() : 선택된 집합을 조건의 범위로 재선택해줍니다.</li>
			</ul>
		</div>

		<div class="btn">
			<ul>
				<li><input type="radio" name="radio" id="ex1" value="1"><label for="ex1" id="ddd">$(".list li").slice(2).addClass("on"); //숫자를 한번만 설정하면 이상을 의미합니다.</label></li> 
				<li><input type="radio" name="radio" id="ex2" value="2"><label for="ex2">$(".list li").slice(2, 4).addClass("on"); //첫 번째 숫자는 시작을 의미하며, 두 번째 숫자는 끝남을 의미합니다.</label></li>	
				<li><input type="radio" name="radio" id="ex3" value="3"><label for="ex3">$(".list li").slice(2, 5).addClass("on");</label></li>
				<li><input type="radio" name="radio" id="ex4" value="4"><label for="ex4">$(".list li").slice(-2, -1).addClass("on"); //'-'는 반대를 의미합니다.</label></li> 
				<li><input type="radio" name="radio" id="ex5" value="5"><label for="ex5">$(".list li").slice(-3, -1).addClass("on");</label></li>
				<li><input type="radio" name="radio" id="ex6" value="6"><label for="ex6">$(".list li").slice(-3, -2).addClass("on");</label></li>
			</ul>
		</div>

		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
		<script type="text/javascript">
		$(document).ready(function(){    
			var btn = $(".btn > ul > li > input")
			
			btn.click(function(){
				var num = $(this).attr("value");

				if(num == 1){
					$(".list li").removeClass("on");
					$(".list li").slice(2).addClass("on");
				}
				if(num == 2){
					$(".list li").removeClass("on");
					$(".list li").slice(2, 4).addClass("on");
				}
				if(num == 3){
					$(".list li").removeClass("on");
					$(".list li").slice(2, 5).addClass("on");
				}
				if(num == 4){
					$(".list li").removeClass("on");
					$(".list li").slice(-2, -1).addClass("on");
				}
				if(num == 5){
					$(".list li").removeClass("on");
					$(".list li").slice(-3, -1).addClass("on");
				}
				if(num == 6){
					$(".list li").removeClass("on");
					$(".list li").slice(-3, -2).addClass("on");
				}
			});
		}); 
		</script> 
	</body>
</html>

Sample2 .slice() 랜덤 메서드 예제입니다.

필터링(Filtering)

  • .eq() : 인덱스 번호에 해당하는 요소를 찾습니다.
  • .filter() : 선택된 요소 집합에서 선택자를 추가하거나 함수를 사용해서 원하는 결과를 추출해냅니다.
  • .first() : 선택된 요소 집합에서 첫번째 자식 요소를 찾습니다.
  • .has() : 선택된 요소들이 자신의 자식 요소에서 주어진 선택자가 있는지를 확인하여 범위를 축소합니다.
  • .is() : 문서 객체의 특징을 판별합니다.
  • .last() : 선택된 노드 집합에서 마지막 자식 요소를 찾습니다.
  • .map() : 대상이 되는 요소 집합의 배열을 새롭게 변경합니다.
  • .not() : 조건에 맞지 않은 것들만 찾아서 선택합니다.
  • .slice() : 선택된 집합을 조건의 범위로 재선택해줍니다.
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>제이쿼리(jQuery)</title>
        <style>
			li.on{padding: 4px 4px 2px 10px; font-size: 90%; color: #c7254e; white-space: nowrap; background-color: #f9f2f4; border-radius: 4px; border:1px dashed #a51a3d;}
			</style>
    </head>
    <body>
		<h3>필터링(Filtering)</h3>
		<div class="list2">
			
			<ul>
				<li class="one1">.eq() : 인덱스 번호에 해당하는 요소를 찾습니다.</li>
				<li class="one2">.filter() : 선택된 요소 집합에서 선택자를 추가하거나 함수를 사용해서 원하는 결과를 추출해냅니다.</li>
				<li class="one3">.first() : 선택된 요소 집합에서 첫번째 자식 요소를 찾습니다.</li>
				<li class="one4">.has() : 선택된 요소들이 자신의 자식 요소에서 주어진 선택자가 있는지를 확인하여 범위를 축소합니다.</li>
				<li class="one5">.is() : 문서 객체의 특징을 판별합니다.</li>
				<li class="one6">.last() : 선택된 노드 집합에서 마지막 자식 요소를 찾습니다.</li>
				<li class="one7">.map() : 대상이 되는 요소 집합의 배열을 새롭게 변경합니다.</li>
				<li class="one8">.not() : 조건에 맞지 않은 것들만 찾아서 선택합니다.</li>
				<li class="one9">.slice() : 선택된 집합을 조건의 범위로 재선택해줍니다.</li>
			</ul>
		</div>

	<div class="btn2">
		<span class="text"></span>
		<ul>
			<li><a href="#c">Click</a></li>
		</ul>
	</div>

		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
		<script type="text/javascript">
		$(document).ready(function(){    
			
			function random() {
				var $li = $(".list2 ul li");
				var start = Math.floor(Math.random() * $li.length );
				var end = Math.floor(Math.random() * ($li.length - start)) + start + 1;

				if (end === $li.length) {
					end = undefined;
				}
				
				$li.removeClass("on")
				
				if(end){
					$li.slice(start, end).addClass("on")
				} else {
					$li.slice(start).addClass("on")
				}

				$("span.text").text("$('.list2 ul li').slice(" + start + (end ? ", " + end : "") + ").addClass('on')");
			}
			$(".btn2 li a" ).click(random);
			
		}); 
		</script> 
	</body>
</html>

Share

Related Articles more
공유하기 링크

Ad

Comments