jQuery find items with each

Question

我在同一个类中有多个元素，我想要自定义它们，我可以分隔我的输入值，但我不知道如何自定义我的跨度值。

​

jQuery('.qty').each(function(){

    if( jQuery(this).val() == jQuery(this).attr("max") ){
        jQuery(this).find('plus').text("Max Value");
    }
    else if( jQuery(this).val() == jQuery(this).attr("min") ){
            jQuery(this).find('min').text("Min Value");
    }
});

input{
  line-height:25px;
  width:150px;
  margin:10px 0;
}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {  
   opacity: 1;
}
span{
  font-size:15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="minus"></span>
<input type="number" class="qty" value="1" min="1" max="4">
<span class="plus"></span>
<br>
<span class="minus"></span>
<input type="number" class="qty" value="1" min="1" max="2">
<span class="plus"></span>
<br>
<span class="minus"></span>
<input type="number" class="qty" value="1" min="1" max="3">
<span class="plus"></span>

​

提前谢谢。

Answer 1

您的代码中有一些问题。

首先，您需要在用户与之交互时检查每个.qty元素的值，而不是在页面加载时检查。为此，请将您的逻辑连接到input事件处理程序。

在那里，您需要使用prev()和next()来获取span元素，因为它们是input的兄弟元素。find()旨在搜索子元素，因此在这种情况下不适用。您还需要在选择器的类名中包含.前缀。

更进一步，您可以向if语句添加一个else子句，该子句在未选择最小/最大值时删除文本标签。

最后，每个集合中第一个span的正确类是.minus，而不是.min。

​

jQuery($ => {
  $('.qty').on('input', function() {
    let $el = $(this);    
    
    if ($el.val() == $el.attr("max")) {
      $el.next('.plus').text("Max Value");
    } else if ($el.val() == $el.attr("min")) {
      $el.prev('.minus').text("Min Value");
    } else {
      $el.next('.plus').text("");
      $el.prev('.minus').text("");
    }
  });
});

input {
  line-height: 25px;
  width: 150px;
  margin: 10px 0;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  opacity: 1;
}

span {
  font-size: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="minus"></span>
<input type="number" class="qty" value="1" min="1" max="4">
<span class="plus"></span>

<br />

<span class="minus"></span>
<input type="number" class="qty" value="1" min="1" max="2">
<span class="plus"></span>

<br />

<span class="minus"></span>
<input type="number" class="qty" value="1" min="1" max="3">
<span class="plus"></span>

​

还要注意，您可以通过在document.ready处理程序中使用jQuery来使代码更加简洁，就像我在上面的示例中所做的那样，让您再次访问$变量。

此外，“缓存”jQuery对象是一种很好的实践，因为访问DOM和构建jQuery对象是(相对)缓慢的操作，因此您希望尽可能少地执行这些操作。在上面的示例中，您可以看到我只访问了$(this)一次，并将其值存储在每个事件处理程序的变量中。

Answer 2

使用当前的HTML语言，可以使用prev获取minus跨度，使用next获取plus跨度(但请继续阅读)。您可能还希望在条件不为真时清除跨度，并在值更改时进行更新：

function update() {
    jQuery('.qty').each(function() {
        const input = jQuery(this);
        const val = input.val();
        input.next().text(
            val == input.attr("max")
            ? "Max value"
            : ""
        );
        input.prev().text(
            val == input.attr("min")
            ? "Min value"
            : ""
        );
    });
}
update();
jQuery(".qty").on("input", update);

活生生的例子：

​

function update() {
    jQuery('.qty').each(function() {
        const input = jQuery(this);
        const val = input.val();
        input.next().text(
            val == input.attr("max")
            ? "Max value"
            : ""
        );
        input.prev().text(
            val == input.attr("min")
            ? "Min value"
            : ""
        );
    });
}
update();
jQuery(".qty").on("input", update);

input{
  line-height:25px;
  width:150px;
  margin:10px 0;
}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {  
   opacity: 1;
}
span{
  font-size:15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="minus"></span>
<input type="number" class="qty" value="1" min="1" max="4">
<span class="plus"></span>
<br>
<span class="minus"></span>
<input type="number" class="qty" value="1" min="1" max="2">
<span class="plus"></span>
<br>
<span class="minus"></span>
<input type="number" class="qty" value="1" min="1" max="3">
<span class="plus"></span>

​

但对我来说，这是脆弱的。相反，我会将每组元素包装在一个div中，如下所示：

<div>
    <span class="minus"></span>
    <input type="number" class="qty" value="1" min="1" max="4">
    <span class="plus"></span>
</div>

...and然后使用jQuery(this).closest("div").find(/*...*/)查找plus和minus元素：

function update() {
    jQuery('.qty').each(function() {
        const input = jQuery(this);
        const val = input.val();
        const div = input.closest("div");
        div.find(".plus").text(
            val == input.attr("max")
            ? "Max value"
            : ""
        );
        div.find(".minus").text(
            val == input.attr("min")
            ? "Min value"
            : ""
        );
    });
}
update();
jQuery(".qty").on("input", update);

(请注意，我查找的是.minus，而不是.min，以查找class="minus" span。)

活生生的例子：

​

function update() {
    jQuery('.qty').each(function() {
        const input = jQuery(this);
        const val = input.val();
        const div = input.closest("div");
        div.find(".plus").text(
            val == input.attr("max")
            ? "Max value"
            : ""
        );
        div.find(".minus").text(
            val == input.attr("min")
            ? "Min value"
            : ""
        );
    });
}
update();
jQuery(".qty").on("input", update);

input{
  line-height:25px;
  width:150px;
  margin:10px 0;
}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {  
   opacity: 1;
}
span{
  font-size:15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <span class="minus"></span>
    <input type="number" class="qty" value="1" min="1" max="4">
    <span class="plus"></span>
</div>
<div>
    <span class="minus"></span>
    <input type="number" class="qty" value="1" min="1" max="2">
    <span class="plus"></span>
</div>
<div>
    <span class="minus"></span>
    <input type="number" class="qty" value="1" min="1" max="3">
    <span class="plus"></span>
</div>

​