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
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");
Comments
Post a Comment