<div class="input_holder"> Some Label <input type="text" maxlength="255" class="cat_textbox" id="field_input" name="somename" /> </div> Add+ <div"> <div class="input_holder"> Some Label <input type="text" maxlength="255" class="cat_textbox" id="field_input" name="somename" /> </div> Add+ <div"> <div class="input_holder"> Some Label <input type="text" maxlength="255" class="cat_textbox" id="field_input" name="somename" /> </div> Add+ <div" />

jquery изменить текст всех предыдущих меток

Это мой HTML

<div class="main_holder">
  <div class="input_holder">
    
<input type="text" maxlength="255" class="cat_textbox" id="field_input" name="somename" /> </div> Add+ <div class="input_holder">
<input type="text" maxlength="255" class="cat_textbox" id="field_input" name="somename" /> </div> Add+ <div class="input_holder">
<input type="text" maxlength="255" class="cat_textbox" id="field_input" name="somename" /> </div> Add+ </div>

и это мой jquery

var increment=1;
$('a.add').click(function() {
  increment++;

  $(this).prev('input_holder').clone().insertBefore(this).prevAll('label').text(increment);

  return false;
});

Моя идея - когда я клонирую поле, я хочу, чтобы это поле показывало, что именно оно (это 1,2,3 и т. Д.). Проблема в том, что я не могу захватить метки, которые находятся перед кнопкой, на которую я нажал.

0
nl ja de
Вы имели в виду селектор «.input_holder»?
добавлено автор algorhythm, источник

3 ответы

See this: http://jsfiddle.net/GpT2x/

$('a.add').click(function() {
  var val = $(this).prev('.input_holder').find('label:last').text();
  val = val == "Some Label" ? 1 : (parseInt(val) + 1);
     $(this).prev('.input_holder').clone().insertBefore(this).closest('.input_holder').find('label').text(val);

  return false;
});
0
добавлено

Вы можете сделать это, используя closeest() вместо prevAll() , например:

var increment=0;
$('a.add').click(function() {
  increment++;

  $(this).prev('.input_holder').clone().insertBefore(this).closest('.input_holder').find('label').text(increment);

  return false;
});

See working demo

UPDATE:
This is a new version that places an attribute on each .input_holder to hold its increment:

$('a.add').click(function() {

   prevholder = $(this).prev('.input_holder');
   increment = prevholder.attr('data-increment');
   increment++;
   prevholder.attr('data-increment', increment);
   prevholder.clone().insertBefore(this).closest('.input_holder').find('label').text(increment);

   return false;
});

See working demo

0
добавлено
Хорошо, я обновил свой ответ с новой версией, которая сохраняет индивидуальные приращения на .input_holder , они сохраняются в атрибуте.
добавлено автор Nelson, источник
он не работает, если вы нажимаете кнопку add в следующем поле, оно будет продолжать увеличиваться с prev и я хочу, чтобы каждое поле начиналось с 1
добавлено автор user1915308, источник

Я бы инкапсулировал входные блоки в другой div. Это дает вам возможность написать более простой код javascript.

HTML

<div class="main_holder">
  <div class="block_holder">
    <div class="input_holder">
      
      
<input type="text" maxlength="255" class="cat_textbox" id="field_input" name="somename" /> </div> Add+ </div> <div class="block_holder"> <div class="input_holder">
<input type="text" maxlength="255" class="cat_textbox" id="field_input" name="somename" /> </div> Add+ </div> <div class="block_holder"> <div class="input_holder">
<input type="text" maxlength="255" class="cat_textbox" id="field_input" name="somename" /> </div> Add+ </div> </div>

JS

$(".main_holder").on("click", "a.add", function() {
    var count = $(this).closest(".block_holder").find("label").length;
    $(this).prev(".input_holder").clone().insertBefore($(this)).find("label").HTML(count);
    return false;
});

Пример можно посмотреть здесь: http://jsfiddle.net/StJwC/

Кстати, вы должны различать имя полей ввода и использовать разные идентификаторы для действительного кода HTML.

0
добавлено
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda