使用jQuery从同一行中的其他html表列设置输入字段的步骤值

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”类是在您复制的 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() 是一个爬取 up 的函数层次结构，你并没有真正到达任何地方。

现在，如果您要解决第二个表达式，您仍然会面临一个问题，那就是，每个购物车项目都有自己的步骤。通过调用.html()，您将获得“找到first 元素的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 对象或其他选择器。那个代表“只看这里”。这样，您基本上可以运行代码并说您不希望它接触其他购物车项目。
• 由于您不需要 HTML 内容，只需要简单的文本，因此更喜欢 text() 而不是 .html()。同样在您的代码中并不重要，但有时会变得混乱，如 jQuery docs 中的示例所示。当然，可读性又是第一位的。
• 最后，调用parseInt() 再次提高了可读性，并且在您尝试添加1 + "10" 时也让您免于头疼。

工作小提琴here.