a form of do until in javascript/jquery

Question

I have a ul

<ul id="variants">
      <a href="#" class="add_options right" data-id="70281696560900'>Add more </a>
      <input type="text" class="cat_name" onClick="prop()">
      <li class="current">
           <input id="product_variants_attributes_1371725880992_name" size="30" type="text">
      </li>  
      <li class="current"> 
           <input id="product_variants_attributes_1371725883311_name" name="product[variants_attributes][1371725883311][name]" size="30" type="text"> 
      </li>
      <li> Add more link allows you to add more li's(options) </li>

      <input type="text" class="cat_name" onClick="prop()">
      <li class="current">
           <input id="product_variants_attributes_1371725880992_name" size="30" type="text">
      </li>  
      <li class="current"> 
           <input id="product_variants_attributes_1371725883311_name" name="product[variants_attributes][1371725883311][name]" size="30" type="text"> 
      </li>
</ul>

The onclick function prop() takes the value of what is entered into that input(cat_name), now i want to populate only the li input fields before the next input with class cat_name with its value (.cat_name.val()). So basically, it ignores the fields after the next .cat_name and only populates the li's input field before it with its value.
Hence populate all the li->input text until the next one. It must not populate any li->input before it just between it and the next one.

How would you go about this?

Thanks.

Answer 1

If you want to set the value of the next 2 inputs you can use .nextUntil() method for selecting the next sibling li elements until the next input element with class of cat_name:

$('input.cat_name').blur(function() {
    $(this).nextUntil('input.cat_name') 
           .find('input[type=text]') 
           .val(this.value);
});

There is also .prevUntil() API that selects the previous siblings until the specified selector.

http://jsfiddle.net/mDfQT/