css selector 검색시 .prop('outerHTML')

css selector 

css 연결 경로  

- id는 하나에만 선택되어야 하고

- class는 여러 중첩이 선택되어야 한다.

id selector : #aa input[type:text] 

class selector: .bb>.cccc

등 무언가 찾을때 중첩되는게 있는지 알기 좋은 메소드

alert($('#user_name_from_box[type=text]').length);
$('#user_name_from_box[type=text]').each(function() {
           alert($(this).prop('outerHTML'));
});

alert($('#user_name_from_box[type=text]').length);

으로 user_name_from_box의 input이 .length 몇개가 있는지 알아봤다.

2개가 뜨길래

$('#user_name_from_box[type=text]')의 .each로 모두 담아

function() { alert($(this).prop('outerHTML') } 를 사용하여 어떤 메소드들이 들어 있나 확인하였다.

.prop()

메소드 세트 또는 선택된 요소의 속성과 값을 반환한다

outerHTML

자신의 태그까지 리턴해준다

만일 2가지 이상 될때

총 감싸고 있는 div나 그런곳에 id를 주어

<div class="modal-dialog metis-modal-dialog" id="search_user_dialog">
 <input class="half-w-input" type="text" id="user_name_from_box">
</div>



$('div#search_user_dialog input#user_name_from').val()

이런식으로 selector 해도 된다.

#search_user_dialog 안에 있는 #user_name_from 을 지정 하면 
특정 id만 선택 되기때문에 중첩 되지 않는다.









jQuery로 outerHTML처럼 사용하는 법


Javascript에는 innerHTML이 있습니다. 선택한 Dom객체의 내부 HTML을 가지고 있는 프로퍼티라고 할 수 있습니다.
(Javascript가 아니라 DOM에 있는건가요?)



<div id="testdiv">

    <a href="#">test</a>

</div>


<a href="#">test</a>입니다

testdiv 엘리먼트를 선택하고 innerHTML을 하면 a태그부터 가져올 수 있지만 div태그는 가져오지 못합니다. 자기 자신은 innerHTML에 포함되지 않죠. 

간단한 소스야 가능하지만 DOM트리가 복잡할때는 div부터 HTML태그를 가져오려면 좀 난감할 때가 있습니다. jQuery로는 $("#testdiv").html()을 하면 a태그만 나옵니다.
그래서 IE에서는 자신의 태그까지 리턴해 주는 outerHTML이란 녀석이 있지만 IE에서만 지원하기 때문에 사실상 별로 의미는 없습니다. 
이거 때문에 꽤 고민하고 있었는데 jQuery를 이용해서 간단하게 할 수 있더군요.

$("...").clone().wrapAll("<div/>").parent().html();

위의 HTML에서는 $("#testdiv").clone().wrapAll("<div/>").parent().html();를 하면 됩니다. 










선택한 엘리먼트 집합의 복사본을 만들고 wrapAll을 이용해서 div로 전체를 감싸버린 뒤
parent()로 div로 올라가서 그안에 html()을 가져오면 $("#testdiv") 자체의 HTML을 가져올 수 있습니다.
(jQuery 체인의 강력함이 느껴지는 순간이군요.)





다른방법

$("#testdiv")[0].outerHTML 

를 써도 된다


(결론 다른방법이라고 올린거 활용하자)