今天寫代碼的時候碰到了一個問題，大體問題是這樣的

HTML代碼：

<!--問題就在第一行-->
<table class="cart-table" data-product-id="{{productId}}">
<!--看我上邊這行-->
        <tr>
            <td class="cart-cell cell-check">
            <label for="" class="cart-label">
                {{#productChecked}}
                <input type="checkbox" class="cart-select" checked>
                {{/productChecked}}
                {{^productChecked}}
                <input type="checkbox" class="cart-select">                      
                {{/productChecked}}
            </label>
            </td>
            <td class="cart-cell cell-img">
                <a href="./detail?productId={{productId}}" class="link">![]({{imageHost}}{{productMainImage}})</a>
            </td>
            <td class="cart-cell cell-info">
                <a href="./detail.html?productId={{productId}}" class="link">{{productName}}</a>
            </td>
            <td class="cart-cell cell-price">￥{{productPrice}}</td>
            <td class="cart-cell cell-count">
                <span class="count-btn minus">-</span>
                <input class="count-input" value="{{quantity}}" data-max="{{productStock}}">
                <span class="count-btn plus">+</span>
            </td>
            <td class="cart-cell cell-total">￥{{productTotalPrice}}</td>
            <td class="cart-cell cell-opera">
                <span class="link cart-delete">刪除</span>
            </td>
        </tr>
    </table>

JS代碼：

 var $this = $(this), productId = $this.parents('.cart-table').data('product-id');

點擊一個多選框，并讀取其類名為cart-table的祖先元素的自定義屬性 data-product-id,然而最開始犯錯的地方就是我用了parent 而沒有用parents。代碼執行之后productId的值變成了undefined。

然后我就做了幾次嘗試，如下

HTML:

<div class="div1" data-name="myName">
    <ul class="ul1">
        <li class="li1"></li>
    </ul>
</div>

JS:

$(document).ready(function () {
        var name = $('li').parent('.div1').data('name');
        document.writeln(name);
    });

期待的結果是myName，然而

image.png

喜聞樂見，我就去問了度娘和谷歌，然后改了一下，

JS:

$(document).ready(function () {
        var name = $('li').parents('.div1').data('name');
        document.writeln(name);
    });

then，成功了。

image.png

大致的結果讓我明白了parent只能網上推一級，也就是找到父元素，而不會再繼續往上找祖先元素，而parents更像是將祖先元素收集起來，然后獲取我們加了給定條件的那一個祖先元素。

以下是做了幾次小嘗試的對比圖，放上來看一下
HTML:

<div class="div1" data-name="myName" data-height="1.83">
    <ul class="ul1" data-color="red" data-age="20">
        <li class="li1"></li>
    </ul>
</div>

JS:

$(document).ready(function () {
        var name    = $('li').parents('.div1').data('name'),
            color   = $('li').parents('.ul1').data('color'),
            age     = $('li').parent('.ul1').data('age'),
            height  = $('li').parent('.div1').data('height');
        document.writeln(name + "\n" + color + "\n" + age+ "\n" + height);
    });

結果：

image.png

That's all for today...