Jquery .find－JoshS的部落格

首先看範例

官網範例:http://api.jquery.com/find/

Ex1:

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>find demo</title>

<style>

span {

color: blue;

}

</style>

<script src="//code.jquery.com/jquery-1.10.2.js"></script>

</head>

<body>

<p><span>Hello</span>, how are you?</p>

<p>Me? I'm <span>good</span>.</p>

<div>Did you <span>eat</span> yet?</div>

<script>

var spans = $( "span" );

$( "p" ).find( spans ).css( "color", "red" );

// 意思就是取P節點下的span，然後css的顏色都改為紅色

</script>

</body>

</html>
 
output:
(html字符我沒拿掉，可以看一下反灰的德字體顏色，就是上方find的程式需求)
<p><span>Hello</span>, how are you?</p>
<p>Me? I'm <span>good</span>.</p>
<div>Did you <span>eat</span> yet?</div>
 
 
 
Ex2: (點按鈕增加填寫欄位)
 
 
   
script:
 
   $("#Add_Data").click(function () {
        $("#body_item").append($("#div_item").find("table").find("tbody").html());
    });
 
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
ps: 解釋一下tbody: TBody是在table中使用的，用來指明由它包括的各表格中的表格主體部分。 
Ex:
<table>
         <thead> <tr><th>Food</th><th>Drink</th><th>Sweet</th> </thead>  // 表頭
        <tbody> <tr><td>A</td><td>B</td><td>C</td> <tr><td>D</td><td>E</td><td>F</td> </tbody>   // tbody
</table>
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
html:
 
<td colspan="6"><span><button class="uibutton confirm" type="button" id="Add_Data">新增</button></span></td>
 
<div id="div_item" style="display:none">
        <table>
            <tr class="itemTag">
                <td style="text-align: center">
                    <input type="text" name="productName" style="width: 170px" maxlength="50" />
                </td>
                <td style="text-align: center">
                    <input type="text" name="productSize" style="width: 170px" maxlength="20" />
                </td>
                <td style="text-align: center">
                    <input type="text" name="productPrice" style="width: 80px" />
                </td>
                <td style="text-align: center;">
                    <input type="text" name="prodcutPerOrderQuality" style="width: 60px;" />
                </td>
                <td style="text-align: center">
                    <input type="text" name="productSaleableQuality" style="width: 60px" />
                </td>
                <td style="text-align: center">
                    <div class="imgDelete" onclick="deleteItem(this)"></div>
                </td>
            </tr>
        </table>
    </div>
 
以上就可透過find去手動增加div_item內的tbody欄位
 