I am trying to update the content of .help-block dynamically with using jQuery but not sure why I am not able to target the .help-block I know that we can simply use $('.help-block').text(....but as I said I need to do this through jQuery Traversing mechanism like using following find() or next() and first() but none of them did the job!
$(function(){ $(".dropdown-menu li a").click(function(){ $("#selector").find('.help-block').html($(this).text()); $("#selector").next('.help-block').html($(this).text()); $("#selector").parent().find('.help-block').html($(this).text()); }); });<div class="col-md-6"> <div class="form-group"> <div class="col-md-12"> <label class="control-label" for="new-cu-emailinput"></label> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="selector" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Please Select From the List<i class="fa fa-chevron-right pull-right" aria-hidden="true"></i></button> <ul class="dropdown-menu" aria-labelledby="selector"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li><a href="#">Separated link</a></li> </ul> </div> <span class="help-block pull-right"></span> </div> </div> </div>