JQuery получает содержимое ближайшего потомка предка с селектором

Question

Я провел последний час на JQuery, Stackoverflow и Google, пытаясь выяснить, что, черт возьми, я делаю неправильно!

Я пытаюсь ограничить число на входе, так что оно должно быть между 1 и максимальным числом, которое определяется в span.maximum

HTML-:

<li> 
    <div> 
    <span class="maximum">5</span> 
    </div> 
    <div> 
    <input type="number" onchange="limiter(this);"> 
    </div> 
</li> 

Jquery:

function limiter(input) { 
max = $(this).closest("li").find(".maximum").text(); 

if (input.value < 1) input.value = 1, alert(max); 
if (input.value > max) input.value = max, alert(max); 
} 

Он работает, если строка 2 заменить

max = $(".maximum").text(); 

Но я пытаюсь подойти к ближайшему предшественнику ли, а затем до этого уровня. Максимум. Могут быть и другие элементы DOM, поэтому это может быть не просто заданное число родителей, а количество установленных детей.

Answer 1

В способе this ссылается на объект окна, вам нужно использовать ссылку input, чтобы найти ближайший элемент, потому что input ссылается на измененный элемент. Кроме того, вы можете преобразовать значения в числа перед сравнением

function limiter(input) { 
 
    var max = +$(input).closest("li").find(".maximum").text() || 0; 
 
    var value = +input.value; 
 

 
    if (value < 1) { 
 
    input.value = 1; 
 
    alert(max); 
 
    } 
 
    if (value > max) { 
 
    input.value = max; 
 
    alert(max); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul> 
 
    <li> 
 
    <div> 
 
     <span class="maximum">5</span> 
 
    </div> 
 
    <div> 
 
     <input type="number" onchange="limiter(this);" /> 
 
    </div> 
 
    </li> 
 
</ul>

---

Это будет более JQuery-иш использовать JQuery обработчиков событий

$('.myinput').change(function() { 
 
    var max = +$(this).closest("li").find(".maximum").text() || 0; 
 
    var value = +$(this).val() || 0; 
 

 
    if (value < 1) { 
 
    $(this).val(1); 
 
    } else if (value > max) { 
 
    $(this).val(max); 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul> 
 
    <li> 
 
    <div> 
 
     <span class="maximum">5</span> 
 
    </div> 
 
    <div> 
 
     <input class="myinput" type="number" /> 
 
    </div> 
 
    </li> 
 
</ul>

Answer 2

Я ненавижу назначение событий в HTML, как я никогда не уверен, что «это» указывает на :), поэтому я бы рекомендовал назначить событие в коде, например:

function limiter() { 
    max = $(this).closest("li").find(".maximum").text(); 
if (this.value < 1) this.value = 1, alert(max); 
if (this.value > max) this.value = max, alert(max); 
} 

$('input').on('change', limiter);