javascript - How to find next textarea using jQuery? -


how find next text area in following html use case?

fiddle: https://jsfiddle.net/hthaava8/

jquery: code:

$("textarea").keyup(function (e) {     var txtarea = $(this).next().find('textarea').eq(0);     alert(txtarea.attr('id'));     $(txtarea).focus();     $(txtarea).val("nicetried"); }); 

html code:

<div class="pure-u-1 pure-u-md-1-8">     <div class="pure-g">         <div class="pure-u-1-2 ">             <p class="boldtext">2.1 </p>           </div>         <div class="pure-u-1-2">          </div>     </div> </div> <div class="pure-u-1 pure-u-md-2-5">     <p class="boldtext">focus next textarea?</p> </div> <div class="pure-u-1 pure-u-md-1-5">     <textarea class="" id="commenty" style="height: 89px; overflow-y: hidden;"></textarea> </div>  <div class="pure-u-1 pure-u-md-1-8">     <div class="pure-g">         <div class="pure-u-1-2 ">             <p class="boldtext">2.2 </p>           </div>         <div class="pure-u-1-2">          </div>     </div> </div> <div class="pure-u-1 pure-u-md-2-5">     <p class="boldtext">focus next textarea?</p> </div> <div class="pure-u-1 pure-u-md-1-5">     <textarea class="" id="commenty1" style="height: 89px; overflow-y: hidden;"></textarea> </div>  <div class="pure-u-1 pure-u-md-1-8">     <div class="pure-g">         <div class="pure-u-1-2 ">             <p class="boldtext">2.3 </p>           </div>         <div class="pure-u-1-2">          </div>     </div> </div> <div class="pure-u-1 pure-u-md-2-5">     <p class="boldtext">focus next textarea?</p> </div> <div class="pure-u-1 pure-u-md-1-5">     <textarea class="" id="commenty2" style="height: 89px; overflow-y: hidden;"></textarea> </div> 

you can use

$(this)                            // current textarea     .parent()                      // parent     .nextall('.pure-u-md-1-5')     // instance of textarea next current element     .first()                       // first instance     .find('textarea')              // select textarea element inside     .focus().val("nicetried");     // focus , set value 

updated fiddle


without using class:

you can use :has() selector.

$(this)     .parent()     .nextall('div:has(textarea)').first() // select `div` having textarea , first     .find('textarea')     .focus().val("nicetried"); 

fiddle


Comments

Popular posts from this blog

java - nested exception is org.hibernate.exception.SQLGrammarException: could not extract ResultSet Hibernate+SpringMVC -

sql - Postgresql tables exists, but getting "relation does not exist" when querying -

asp.net mvc - breakpoint on javascript in CSHTML? -