CODEWITHSUNDEEP
javascriptjqueryhtmlcss
AL-zami
AL-zami

Reputation: 9066

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

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>

Upvotes: 1

Views: 170

Answers (4)

Ivan Sieder
Ivan Sieder

Reputation: 952

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.

Upvotes: 0

Deepak Dholiyan
Deepak Dholiyan

Reputation: 1912

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.

Upvotes: 2

Farzad Yousefzadeh
Farzad Yousefzadeh

Reputation: 2551

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

Upvotes: 1

CriPstian
CriPstian

Reputation: 128

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.

Upvotes: 0

Related Questions