2016-03-29 2 views
0

У меня есть 3 ввода с таким же идентификатором , как получить второе входное значение, например? Я использую eq() и nth-child(), не работаетКак получить значение входного элемента по его номеру номера

console.log($("#txtItemQuantity:eq(2)").val()); 

Примечание: Я хочу использовать идентификатор как идентификатор, а не класс

HTML

<div class="masterItem"> 
    <div class="row oItem"> 
     <div class="col-md-2"> 
      <div class="form-group"> 
       <div class="input-group"><span class="input-group-addon" style="font-weight:bold;color:#330099">Name</span><input id="txtItemName" class="form-control" placeholder="Name" aria-describedby="basic-addon1" type="text"></div> 
       <div class="input-group"><span class="input-group-addon" style="font-weight:bold;color:#330099">Quantity</span><input id="txtItemQuantity" class="form-control" placeholder="Quantity" aria-describedby="basic-addon1" type="text"></div> 
      </div> 
     </div> 
    </div> 
    <div class="row oItem"> 
     <div class="col-md-2"> 
      <div class="form-group"> 
       <div class="input-group"><span class="input-group-addon" style="font-weight:bold;color:#330099">Name</span><input id="txtItemName" class="form-control" placeholder="Name" aria-describedby="basic-addon1" type="text"></div> 
       <div class="input-group"><span class="input-group-addon" style="font-weight:bold;color:#330099">Quantity</span><input id="txtItemQuantity" class="form-control" placeholder="Quantity" aria-describedby="basic-addon1" type="text"></div> 
      </div> 
     </div> 
    </div> 
    <div class="row oItem"> 
     <div class="col-md-2"> 
      <div class="form-group"> 
       <div class="input-group"><span class="input-group-addon" style="font-weight:bold;color:#330099">Name</span><input id="txtItemName" class="form-control" placeholder="Name" aria-describedby="basic-addon1" type="text"></div> 
       <div class="input-group"><span class="input-group-addon" style="font-weight:bold;color:#330099">Quantity</span><input id="txtItemQuantity" class="form-control" placeholder="Quantity" aria-describedby="basic-addon1" type="text"></div> 
      </div> 
     </div> 
    </div> 
</div> 
+0

Идентификатор того же идентификатора должен быть уникальным классом использования вместо – guradio

+2

«У меня есть 3 ввода с одинаковым идентификатором» Идентификатор всегда должен быть уникальным. Вместо этого используйте идентификатор данных. – gurvinder372

+0

'console.log ($ (" input: eq (2) "). Val());' Но 'ID должен быть уникальным' – Rayon

ответ

1

ID должен быть уникальным. Он не может повториться.

Вы можете выбрать с помощью атрибута ID, как

$('[id="txtItemQuantity"]').eq('1') 

Рабочая Демонстрационный

alert($('[id="txtItemQuantity"]').eq('1').val())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input tpye="text" id="txtItemQuantity" value="1"> 
 
<input tpye="text" id="txtItemQuantity" value="2"> 
 
<input tpye="text" id="txtItemQuantity" value="3">

+0

Всегда рад помочь. –

+0

это неправильно, если я настаиваю на использовании id, чем класс в этом случае, по-видимому, он все еще имеет решение? Еще раз спасибо за ваше прекрасное решение. – akauts

+0

И моя функция загрузки массива работает как шарм! Спасибо, сэр. $ .each (e.vntret, функция (а, б) {$ ('[ID = "txtItemQuantity"]') экв (а) .val (b.item_qtyorder);. \t \t \t \t \t}) ; – akauts

-1

Try, как это: console.log($("#txtItemQuantity").eq(1).val()); Dont 'забыть, отсчет начинается с 0

+1

Я сомневаюсь, что это сработает, потому что если бы у вас было 3 элемента с одинаковым идентификатором, разметка была бы недействительной, поэтому вероятность взлома jquery – Liam

+0

Ну, конечно, это не сработает, если у вас есть 3 элемента с одинаковым идентификатором. Идея об идентификаторе должна быть уникальной. В противном случае вы не можете использовать eq, или можете быть, но не идеальны. – dpaul1994

+0

Это не работает ... –

0

Попробуйте это:

console.log($("[id^=txtItemQuantity]").eq(1).val()); 
+0

'eq всегда начинаются с индекса 0, поэтому вам нужно использовать eq (1) для получения второго ввода количества. –

+0

Теперь это прекрасно, и отлично выглядит. –

0

jsfiddle ссылка идет here

обновил ссылку скрипку с HTML link

HTML

<div id="txtItemQuantity"> 
    <input value="1"> 
    <input value="2"> 
    <input value="3"> 
</div> 

JQuery:

var res = $("#txtItemQuantity input:nth-child(2)").val(); 
alert(res); // result 2 
+0

Спасибо, я видел это на странице обучения jquery. как насчет в моем случае? пожалуйста, посмотрите мой html (обновлено), спасибо – akauts

+0

Подождите, позвольте мне проверить и сделать это за вас. –

2

Здесь никто не дает правильное решение. Основная проблема заключается в вашей недействительной разметке . No two elements in your HTML should have the same id. Для этого нарушаются соглашения W3C и будут давать непредсказуемые результаты. Не только здесь, но и в других вещах.

Измените разметку так, что идентификатор является уникальным и добавить класс, затем выберите этим:

<div class="masterItem"> 
    <div class="row oItem"> 
     <div class="col-md-2"> 
      <div class="form-group"> 
       <div class="input-group"><span class="input-group-addon" style="font-weight:bold;color:#330099">Name</span> 
        <input id="txtItemName1" class="txtItemName form-control" placeholder="Name" aria-describedby="basic-addon1" type="text"></div> 
       <div class="input-group"><span class="input-group-addon" style="font-weight:bold;color:#330099">Quantity</span> 
        <input id="txtItemQuantity1" class="txtItemQuantity form-control" placeholder="Quantity" aria-describedby="basic-addon1" type="text"></div> 
      </div> 
     </div> 
    </div> 
    <div class="row oItem"> 
     <div class="col-md-2"> 
      <div class="form-group"> 
       <div class="input-group"><span class="input-group-addon" style="font-weight:bold;color:#330099">Name</span> 
         <input id="txtItemName2" class="txtItemName form-control" placeholder="Name" aria-describedby="basic-addon1" type="text"></div> 
       <div class="input-group"><span class="input-group-addon" style="font-weight:bold;color:#330099">Quantity</span> 
         <input id="txtItemQuantity2" class="txtItemQuantity form-control" placeholder="Quantity" aria-describedby="basic-addon1" type="text"></div> 
      </div> 
     </div> 
    </div> 
    <div class="row oItem"> 
     <div class="col-md-2"> 
      <div class="form-group"> 
       <div class="input-group"><span class="input-group-addon" style="font-weight:bold;color:#330099">Name</span> 
          <input id="txtItemName3" class="txtItemName form-control" placeholder="Name" aria-describedby="basic-addon1" type="text"></div> 
       <div class="input-group"><span class="input-group-addon" style="font-weight:bold;color:#330099">Quantity</span> 
         <input id="txtItemQuantity3" class="txtItemQuantity form-control" placeholder="Quantity" aria-describedby="basic-addon1" type="text"></div> 
      </div> 
     </div> 
    </div> 
</div> 

укорачивается:

<input id="txtItemName1" class="txtItemName form-control" type="text"> 

теперь просто настроить ваш селектор JQuery (от исходного вопроса), чтобы использовать селектор классов (.), а не селектор id (#).

console.log($(".txtItemQuantity:eq(2)").val()); 

FYI, потому что вы не предоставили имена и потому, что доля вашей входной в тот же идентификатор результаты вывешены назад (когда форма размещена) также будет непредсказуемым. Исправьте основной вопрос!

+0

PLS проверить Rino Raj решение, его работы! – akauts

Смежные вопросы