[jQuery] 取得容器內所有元件 (get all elements in container)

2016-08-08

2342
0
jQuery
2023-03-06

運用jQuery取得容器內元件

本篇以取得該元件在容器內的數量為例

根據 tag / class 名稱得知某個容器內，該 tag / class 所佔據的數量。

開發環境

關鍵程式碼

"取得容器內所有元素"

JavaScript 作法: var elms = document.getElementById(containerID).querySelectorAll(attr);

jQuery 作法: var elms = $("#" + containerID).find(attr);

完整程式碼

GetElements.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Get elements</title>
        <meta name="author" content="user" />
    </head>
    <body>
        <form id="myform">
            <div id="div1">
                <input type="text" class="txt1" value="111" disabled/>
                <input type="text" value="222" disabled/>
                <input type="text" value="333" disabled/>
            </div>
            <textarea disabled>textarea</textarea>
            <input type="button" id="btnResult" value="Display results"/>
        </form>
		
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#btnResult").click(function(){
                    // container , all elements
                    getElementsAmount("myform", "*");  
                    
                    // container , tag
                    getElementsAmount("myform", "div");
                    getElementsAmount("myform", "input[type = text]");
                    getElementsAmount("myform", "textarea");
                    getElementsAmount("myform", "input[type = button]");
                    getElementsAmount("myform", "button");
                    
                    // container , class
                    getElementsAmount("myform", ".txt1");  
			    	
                    // inner container , class
                    getElementsAmount("div1", "input[type = text]");
                });
			    
                function getElementsAmount(containerID, attr)
                {
                    // get elements in this container according to attribute
                    var elms = $("#" + containerID).find(attr);
					
                    alert
                    (
                        "container id: " + containerID + "\n" +
                        "elements length = " + elms.length + "( " + attr + " )"
                    );
                }
            });
        </script>
    </body>
</html>

執行結果:

textarea $(document).ready(function(){ $("#btnResult").click(function(){ // container , all elements getElementsAmount("myform", "*"); // container , tag getElementsAmount("myform", "div"); getElementsAmount("myform", "input[type = text]"); getElementsAmount("myform", "textarea"); getElementsAmount("myform", "input[type = button]"); getElementsAmount("myform", "button"); // container , class getElementsAmount("myform", ".txt1"); // inner container , class getElementsAmount("div1", "input[type = text]"); }); function getElementsAmount(containerID, attr) { // get elements in this container according to attribute var elms = $("#" + containerID).find(attr); alert ( "container id: " + containerID + "\n" + "elements length = " + elms.length + "( " + attr + " )" ); } });

參考資料:
Get elements in container
querySelectorAll() Method

其它:
當瀏覽器不支援 querySelectorAll 的另個實現方法

如果這篇文章有幫助到你，想支持一下作者可以幫忙點擊側欄的「 Goolgle AdSense 」廣告 😄

如果你喜歡這篇文章可以點擊「分享」按鈕，來分享到你的網路社群
(以上文章內容如有謬誤，敬請不吝指教)