나도아빠다
2k
2019-02-05 20:00:34 작성 2019-02-05 21:30:23 수정됨
8
1374

다른사람이 만든 Jquery소스보다가..예상외로 인지도가 낮은 함수들.


1.$.filter

2. $.closest

3. $.index

4.$.siblings

여기오시는분들은 많이들 아실 함수겠지만.. 저 함수들을 몰라서 소스코드가 무지하게 길어지는경우 참많이 본거같습니다 ㅎㅎㅎㅎ



말나온김에 간단한 퀴즈 하나 낼까요


음 예를 들어서


         <table id="test">
		<tbody>
			<tr>
				<td>
					<label for="a1">라디오1<label>
					<input type="radio" name="a" id="a1"></input>
				</td>
			</tr>
			<tr>
				<td>
					<label for="a2">라디오2<label>
					<input type="radio" name="a" id="a2"></input>
				</td>
			</tr>
			<tr>
				<td>
					<label for="a3">라디오3<label>
					<input type="radio" name="a" id="a3"></input>
				</td>
			</tr>
			<tr>
				<td>
					<label for="a4">라디오4<label>
					<input type="radio" name="a" id="a4"></input>
				</td>
			</tr>
			<tr>
				<td>
					<label for="a5">라디오5<label>
					<input type="radio" name="a" id="a5"></input>
				</td>
			</tr>
		</tbody>
	</table>
	<div>
		<button type="button" id="showall">show all</button>
		<button type="button" id="showchecked">show checked</button>
		<button type="button" id="hidechecked">hide checked</button>
	</div>


테이블안에 이런식으로 코딩이 되어있고,


radio버튼 선택한후,


show checked 버튼을 누르면 라디오 선택한줄을 제외한 모든줄을 숨기고(또는 삭제하고)

hide checked 버튼을 누르면 선택한 줄만 숨기는 처리를 하라고 하면,

두 함수를 어떻게들 작성하시나요?

1
0
  • 댓글 8

  • 고뿌
    873
    2019-02-05 20:37:01

    저도 한번도 써 본적 없는 메소드들이네요. 긁적긁적;

    사실 1,2,4는 그닥 쓰고싶지 않고... 3은 꽤 좋은데, 항상 each()써서 그런지... 안썼네요. index는 써보도록 노력해봐야겠습니다.

    0
  • Place
    82
    2019-02-05 21:45:34 작성 2019-02-05 21:45:57 수정됨

    저는 1번은 써본거같기도한데 3이랑 4는 사용해봤습니다

    저같은경우에는 this랑 find 많이 사용하는 것같습니다(초급개발자라서 도움되실진 모르겠어요)

    0
  • NULL만나면
    2k
    2019-02-05 22:26:12

    https://jsfiddle.net/idealful/cpanhwdf/

    2
  • 즈루시
    12k
    2019-02-05 23:35:59

    css selector 사용해서 제어 합니다, 내부적으론 저 함수들을 쓰고 있을지 모르겠네요.

    아직까진 이게 편해서 ^^;

    0
  • Eric Lee
    193
    2019-02-06 01:12:43 작성 2019-02-06 01:18:52 수정됨

    인지도가 낮은 함수와 복잡한(?) 코딩 및 많은 function을 지극히 싫어해서...ㅎㅎ


    function buttonClick() {

    for(var i=0; i<$(':radio[name=a]').length; i++){

        if(this.id == "showall"){

            $($(':radio[name=a]')[i]).parents('tr').show();

        }else if(this.id == "showchecked"){

        if($(':radio[name=a]')[i].checked){

            $($(':radio[name=a]')[i]).parents('tr').show();

          }else{

          $($(':radio[name=a]')[i]).parents('tr').hide();

          }

        }else{

        if($(':radio[name=a]')[i].checked){

          $($(':radio[name=a]')[i]).parents('tr').hide();

          }else{

          $($(':radio[name=a]')[i]).parents('tr').show();

          }    

        }

      }

    }

    0
  • Keloper245
    962
    2019-02-06 09:04:52


    $(document).on("click", "#showall", function() {
          $("[name='a']").parents("tr").show();
    });
    $(document).on("click", "#showchecked", function() {
          $("[name='a']").parents("tr").hide();
          $("input[name='a']:checked").parents("tr").show();
    });
    $(document).on("click", "#hidechecked", function() {
          $("[name='a']").parents("tr").show();
          $("input[name='a']:checked").parents("tr").hide();
    });


    0
  • 나도아빠다
    2k
    2019-02-06 13:59:19

    오 많이들 그냥 parents로 말아쓰시는군요..

    전 추후 소스변경하다가 차상위 개체가 엮일슈있어서 parents를 쓴다해도 [0]을 꼭 붙이곤 했는게 제가 너무 과했던건가요..?

    0
  • jja
    2k
    2019-02-06 14:07:24
    저도 0써요...안쓰면 안됐던 적이 있었거든요..
    parseInt도 꼭 10넣어요...과거에 8진수? 16진수로 적용된 경험이 있어서...

    0
  • 로그인을 하시면 댓글을 등록할 수 있습니다.