탐색요소와 필터메소드

var $a = (".class").children();//변수 선언

var content1 = $a.text();

 

 탐색 요소

실습

<style>
.hot {
 color: blue;
 background-color: yellow; //배경색은 노랑색
}
</style>
<script>
 $(document).ready(function() {

  $(".fl").children().eq(1).click(function() {   --> fl클래스의 자식 중 eq(1)을 클릭시
   $(".fl").children().eq(2).addClass("hot");

      -->  fl클래스의 자식 중 eq(2) 에 .hot 클래스를 추가 
   $(".fl").children().eq(4).addClass("hot"); 주의사항! addClass 대문자 임!

  });

 });
</script>

 

<!-- body 부분-->

<fieldset class="fl">  -->클래스 이름 : fl
   <legend>토핑선택</legend>  --> eq(0)
   <p>
    <a href="#">인기 토핑</a>  --> eq(1)
   </p>
   <p><input type="checkbox" name="topping" value="bacon">베이컨</p>  --> eq(2)
   <p><input type="checkbox" name="topping" value="cheese">치즈</p>  --> eq(3)
   <p><input type="checkbox" name="topping" value="onion">양파</p>  --> eq(4)
   <p><input type="checkbox" name="topping" value="mushroom">버섯</p>  --> eq(5)
  </fieldset>

 

 

결과값