jQuery: ближайший пробел textarea

Question

У меня есть динамически генерируемое количество текстовых областей в форме. То, что я хотел бы сделать, - найти ближайший (ближайший $(this) должен работать для моей функции, при условии, что братья и сестры ниже вниз рассматриваются дальше) пусто один, в который будет размещен некоторый контент.

На данный момент он задает конкретный один, таким образом:

var $poorarea = $('textarea#doc_edits_attributes_0_body'); 

Но функция работать она должна быть что-то вроде (очень псевдокод):

var $poorarea = $(this).closest('textarea.editable_areas').empty(); 

Любая помощь будет Великий. Родительский/детский материал в jQuery смущает меня в лучшие времена. Очень важно найти ближайший пустой один, тоже.

Упрощенная HTML здесь:

<div class="controls"> 
    <div id="preview_article" class="thumbnail"> 
    <ul class="thumbnails" id="sort_articles"> 
     <li class="span5"> 
     <input class="article_chooser" id="doc_article_ids_" name="doc[article_ids][]" type="checkbox" value="23" /> 
     </li> 
     <li class="span5"> 
     <input class="article_chooser" id="doc_article_ids_" name="doc[article_ids][]" type="checkbox" value="24" /> 
     </li> 
     <li class="span5"> 
     <input class="article_chooser" id="doc_article_ids_" name="doc[article_ids][]" type="checkbox" value="26" /> 
     </li> 
     <li class="span5"> 
     <input class="article_chooser" id="doc_article_ids_" name="doc[article_ids][]" type="checkbox" value="27" /> 
     </li> 
     <li class="span5"> 
     <input class="article_chooser" id="doc_article_ids_" name="doc[article_ids][]" type="checkbox" value="28" /> 
     </li> 
    </ul> 
    </div> 
</div> 

<div class="control-group"> 
    <div class="controls"> 
    <div class="tab-content"> 
     <textarea class="editable_areas" id="doc_edits_attributes_0_body" name="doc[edits_attributes][0][body]"></textarea> 
     <textarea class="editable_areas" id="doc_edits_attributes_1_body" name="doc[edits_attributes][1][body]"></textarea> 
     <textarea class="editable_areas" id="doc_edits_attributes_2_body" name="doc[edits_attributes][2][body]"></textarea> 
    </div> 
    </div> 
</div> 

Спасибо за любую помощь!

Answer 1

Используйте код pseudo-selector eq в коде jQuery, который выбирает данный индекс из массива элементов и запускает его через цикл for.

for(i = 0; i < $(".tab-content").children("textarea").length; i++){ 
    if($(".tab-content").children("textarea:eq(" + i + ")").val() == ''){ 
     //do whatever you need to do 
     break; 
    } 
}