can't grab the next sibling using jquery next()

Question

here i am trying to get the idea about how next works.Here i am trying to show a hidden textarea on click a span element.The hidden textarea is the immediate next sibling of the span element.But seems it is not working .I am getting the following error:

ReferenceError: $ is not defined

<html>
<head>
<style>

.customcmntform{
   display:none;
 }

 #customcomment{
   color:blue;
   cursor:pointer;
   text-decoration:underline;
 }

</style>
<script  src='jquery/jquery.js'></script>
</head>
</body>
    <div class='customcmntholder'></div>
    <span id='customcomment' class='cmnt' onclick='letmecomment(event);'>Add a Comment...</span>
    <form action='<?php echo $_SERVER['PHP_SELF']; ?>' method='post'  name='cmntform'> 
        <textarea   class='customcmntform' placeholder=' add a comment......' >
        </textarea>
    </form> 
    <script>

    function letmecomment(event){
        var cmnt=event.target;
        var area=$(cmnt).next('.customcmntform');
        $(area).show();
    }

    </script>
</body>
</html>

if you have the error `ReferenceError: $ is not defined` that seems you have not linked jquery correctly — Arnaud Gueras, Jan 13 '16 at 17:11
http://stackoverflow.com/questions/2075337/uncaught-referenceerror-is-not-defined — adeneo, Jan 13 '16 at 17:16

score 2 · Accepted Answer · answered Jan 13 '16 at 17:30

2

zami, Please check below code this will work fine.

   function letmecomment(event){
     $(event.target).next('form').find('.customcmntform').show();
   }

Next():-Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.

answered Jan 13 '16 at 17:30

Deepak Dholiyan

1,774
1
20
35

worked..thanks.. :)...textarea was not the immediately next sibling – AL-zami Jan 13 '16 at 17:47

score 1 · Answer 2 · answered Jan 13 '16 at 17:27

Instead of using onClick try using .click method cause that follows the standard of registering eventListeners in modern browsers.

Always use $(document).ready() because this is the facade design pattern used in jQuery library to detect the full load of content and the ready state of DOM.

Your code could look like this:

<span id='customcomment'>Add a Comment...</span>
<form action='#' method='post'  name='cmntform'> 
    <textarea   class='customcmntform' placeholder=' add a comment......' >
    </textarea>
</form>

Then use this JS snippet for it:

$(document).ready(function() {
   $('#customcomment').click(function() {
        console.log('a');
      $(this).next().find('.customcmntform').show();
   })
 });
</script>

Working Demo

I generally prefer .on("click", ... As that way I only have 1 handler for all matching objeckt, which means tat it consumes less memory and it's also valid for dynamically created objects, whereas. Click() creates one handler per object and doesn't reach dynamic objects unless you reenable it for all objects — Ivan Sieder, Jan 13 '16 at 17:48
That is actually a true fact and note for future @ivan sieder — Farzad Yousefzadeh, Jan 14 '16 at 08:58

score 0 · Answer 3 · answered Jan 13 '16 at 17:16

Try with $(cmnt).nextSibling() this should get you the next tag that is at the same level with your span. $(..).next is used for when you get a multiple match on your element search jquery.

<table>
    <tr>
        <td class="clsname">something1</td>
        <td class="clsname">something2</td>
    </tr>
</table>
<script>
    $(.clsname).next(); //this should retrieve the something2 td tag.
</script>

for your case you have only the span element from event.target. in this case try to use $(cmnt).nextSibling() to get the next same level tag.

score 0 · Answer 4 · answered Jan 13 '16 at 17:41

First of all i think it's a error in linking jQuery. Try the google hosted script first as it was mentioned by sone in the comments. And even if it wouldn't be that: i would use something like

$('#customcomment').on("click", function() {
    // code here
});

That makes the code much cleaner.

can't grab the next sibling using jquery next()

4 Answers4