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

Question

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

Это мой HTML

<div class="main_holder">
  <div class="input_holder">
    Some Label

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

  <div class="input_holder">
    Some Label

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

  <div class="input_holder">
    Some Label

        <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

добавлено 09 Январь 2013 в 12:38 автор user1915308

Просмотры: 4

источник

nl ja de

Вы имели в виду селектор «.input_holder»?

добавлено 09 Январь 2013 в 12:41, автор algorhythm, источник

3 ответы

Видеокурс "Создание приложений для Android"

Получи множество видеоуроков по Android сейчас

Видеокурс по Java для начинающих

Получи видеокурс по Java для начинающих с упражнениями

Инструменты успешного делегирования

Автор: Евгений Попов

автор Anujith · Answer 1 · 2013-01-09T01:01Z

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;
});

автор Nelson · Answer 2 · 2013-01-09T12:48Z

Вы можете сделать это, используя 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

автор Zeal · Answer 3 · 2013-01-09T03:01Z

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

HTML

<div class="main_holder">
  <div class="block_holder">
    <div class="input_holder">
      Some Label
      

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

  </div>
  <div class="block_holder">
    <div class="input_holder">
      Some Label
      

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

  </div>
  <div class="block_holder">
    <div class="input_holder">
      Some Label
      

      <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.