jQuery | javascript | CSS

40.jQuery - Wrap ( 05.Maripulation - 04.Wrap )

Godffs 2009. 11. 11. 12:32
반응형
Wrap : 요소를 감싸서 추가
    검색된 요소를 특정 태그로 감싸는 예제입니다.

04.Wrap.htm

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>검색된 요소를 특정 태그로 감싸기(Wrap)</title>

    <script src="../jQuery/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function() {

            //[1] <h3>...</h3> <u>태그로 묶자

            $('h3').wrap("<u></u>");

           

            //[2] 모든 A태그를 <li>으로 묶자.

            //[a] 첫번째 링크앞에 동적으로 <ol> 태그 삽입

            $('<ol type="1" id="community"></ol>').insertBefore('a:eq(0)');

           

            //[b] 모든 링크를 <li> 감싸고 이를 <ol> 태그에 추가

            $('a').each(function() {

                $(this).appendTo('#community').wrap('<li></li>');

            });

 

        });

    </script>

   

</head>

<body>

    <h3>.Net 기술 관련 커뮤니티</h3>

        <a href="http://www.asp.net">ASP</a>

        <a href="http://www.SilverLight">SilverLight</a>

        <a href="http://www.windowsclient.net">WPF</a>       

        <a href="http://www.dotnetkorea">.NET ALL(?)</a>

        <a href="http://godffs.tistory.com">준철이블로그(Godffs)</a>

    </body>   

</html>


결과화면

[그림40-1]



반응형