設置來自其他 html 表列與 jQuery 同一行的輸入字段的步驟值

Question

非常感謝社區讓我在這里學到了很多東西。 所以這是我自己的第一個問題：

我需要為 html 表中的輸入字段（ input[title="Menge"] ）設置步長值。 該值必須取自同一行中的另一個表列（ dd.variation-Verpackung p ）（每個表行中有不同的步長值）

這是我的 html：

<tbody>
    <tr class="cart_item">
        <td class="product-name">
                <a href="/products/druckluftarmaturen/kegeltuelle-mit-o-ring-dichtung/?attribute_pa_hose-id=6-mm&amp;attribute_pa_cone=13&amp;attribute_pa_package=10">Kegeltülle DIN 20033 mit O-Ring Dichtung </a>
                    <div class="cat">Druckluftarmaturen</div>                           
                    <dl class="variation">
                        <dt class="variation-HoseID">Hose ID:</dt>
                        <dd class="variation-HoseID"><p>6 mm</p></dd>
                        <dt class="variation-Cone">Cone:</dt>
                        <dd class="variation-Cone"><p>1:3</p></dd>
                        <dt class="variation-Verpackung">Verpackung:</dt>
                        <dd class="variation-Verpackung">
                            <p>10</p>
                        </dd>
                    </dl>
                    <dl class="variation">
                        <dt>Bestell-Nr.</dt>
                        <dd>034-0006v</dd>
                    </dl>
        </td>
        <td class="product-quantity">
            <div class="quantity">
                <label class="screen-reader-text" for="">Anzahl</label>
                <input type="number" id="" class="" step="1" min="0" max="" name="cart[11c4b4d2c3c1a853d0f4d2c31573e914][qty]" value="11" title="Menge" size="4" placeholder="" inputmode="">
            </div>
        </td>
        <td class="product-remove">
            <a href="/anfrageliste/?remove_item=11c4b4d2c3c1a853d0f4d2c31573e914&amp;_wpnonce=e47b3633ba" class="remove" title="Dieses Produkt entfernen">×</a>
        </td>
    </tr>
    <tr class="cart_item">
        <td class="product-name">
                <a href="/products/druckluftarmaturen/kegeltuelle-mit-o-ring-dichtung/?attribute_pa_hose-id=6-mm&amp;attribute_pa_cone=13&amp;attribute_pa_package=10">Kegeltülle DIN 20033 mit O-Ring Dichtung </a>
                    <div class="cat">Druckluftarmaturen</div>                           
                    <dl class="variation">
                        <dt class="variation-HoseID">Hose ID:</dt>
                        <dd class="variation-HoseID"><p>6 mm</p></dd>
                        <dt class="variation-Cone">Cone:</dt>
                        <dd class="variation-Cone"><p>1:3</p></dd>
                        <dt class="variation-Verpackung">Verpackung:</dt>
                        <dd class="variation-Verpackung">
                            <p>1</p>
                        </dd>
                    </dl>
                    <dl class="variation">
                        <dt>Bestell-Nr.</dt>
                        <dd>034-0006v</dd>
                    </dl>
        </td>
        <td class="product-quantity">
            <div class="quantity">
                <label class="screen-reader-text" for="">Anzahl</label>
                <input type="number" id="" class="" step="1" min="0" max="" name="cart[11c4b4d2c3c1a853d0f4d2c31573e914][qty]" value="11" title="Menge" size="4" placeholder="" inputmode="">
            </div>
        </td>
        <td class="product-remove">
            <a href="/anfrageliste/?remove_item=11c4b4d2c3c1a853d0f4d2c31573e914&amp;_wpnonce=e47b3633ba" class="remove" title="Dieses Produkt entfernen">×</a>
        </td>
    </tr>
</tbody>    

                    

這是我的 jQuery：

jQuery( document ).ready(function() {
   var vpc = jQuery(".woocommerce-cart .quantity input").closest(".cart_item").find("dd.variation-Verpackung p").html();
   jQuery(this).closest(".woocommerce-cart .quantity input").attr('step', vpc);
});

我做錯了什么？

最好的問候和感謝您的幫助帕斯卡

Answer 1

所以這里有一些假設。

• 我相信'.woocommerce-cart' class 分配在您復制的 HTML 部分的某些祖先中。 我對 woocommerce 沒有任何經驗，所以請告訴我。
• 您復制的 HTML 包含在<table>標記中。 如果不是，則它本質上是無效的，因為<tbody>標記根據架構無效。 盡管如此，該頁面可能仍然有效，但例如 jQuery 將無法索引文檔的該部分，並且選擇器在大多數情況下都不起作用。

接下來，返回您的代碼

jQuery( document ).ready(function() {
   var vpc = jQuery(".woocommerce-cart .quantity input").closest(".cart_item").find("dd.variation-Verpackung p").html();
   jQuery(this).closest(".woocommerce-cart .quantity input").attr('step', vpc);
});

首先，您將“步驟”保存在 vpc 變量中。 第二部分我不太確定在 $(document).ready() 上下文中，'this' 指的是 'window' 元素，並且由於.closest()是爬上層次結構的 function，所以你沒有真正到達任何地方。

現在，如果你要解決第二個表達式，你仍然會面臨一個問題，那就是，每個購物車項目都有自己的步驟。 通過調用.html() ，您將獲得“找到的第一個元素的 HTML 內容”。 因此，您會將第一項的步長值分配給以下所有項。

最后一件更像是建議的事情是試圖找到一種方法使 jQueries 盡可能簡單。 jQuery 相當慢，考慮到選擇器的工作方式，這是可以預料的，雖然這在您的情況下不是問題，因為預計總體項目數量很少，但它也有助於提高可讀性。

因此，要將所有這些放在一起，您可以執行以下操作：

jQuery(document).ready(function() {
    $('.woocommerce-cart tr.cart_item').each(function(_, item) {
        let stepValue = parseInt($('.variation-Verpackung p', item).text());
        $('.quantity input', item).attr('step', stepValue);
    });
});

注意這里的幾件事。

• 90% 的時間你可以通過簡單的選擇器和一些循環來實現你想要的。
• 在 jQuery 選擇器中，您可以添加可選的第二個參數，稱為“上下文”，可以是 HTMLElement、jQuery object 或其他選擇器。 那個代表“只看這里”。 這樣，您基本上可以運行代碼並說您不希望它接觸其他購物車項目。
• 因為你不需要 HTML 內容，只有簡單的文本，更喜歡text()到.html() 。 同樣在您的代碼中並不重要，但有時會變得混亂，如 jQuery文檔中的示例所示。 當然，可讀性又是第一位的。
• 最后，調用parseInt()再次提高了可讀性，並且在您嘗試添加1 + "10"時也可以讓您免於頭痛。

在這里工作小提琴。