jquery problem using parent() and next() selectors

StackOverflow https://stackoverflow.com/questions/4258977

  •  27-09-2019
  •  | 
  •  

Question

I have the following code:

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Untitled Page</title>
    <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $(".Note").click(function(){
        $(this).parent().parent().next(".divNote").slideToggle();
        });
    });
    </script>

  </head>
  <body>
    <table>
        <tr>
            <td class="Note" style="cursor: pointer">
                <font size="3" color="#800080"><b><u>TD</u></b> </font>
            </td>
        </tr>
    </table>
    <br />
    <div style="display: none" class="divNote">
    </div>
  </body>
</html>

I can figure out why it is not working.

example: Here

Any help.

Was it helpful?

Solution

Let me explain why it doesn't work

You've added a filter to next() function that filters out only matching elements. In your case it only contained one element (br) which didn't have the matching class name, so the resulting set was truncated to zero elements.

The way to make it work

So instead of simply filtering next element you have to filter out from all siblings:

$(document).ready(function() {
  $(".Note").click(function(){
    $(this).parents("table").siblings(".divNote").slideToggle();
  });
});

or filter out from all next siblings (when previous siblings aren't relevant at all)

$(document).ready(function() {
  $(".Note").click(function(){
    $(this).parents("table").nextAll(".divNote").slideToggle();
  });
});

OTHER TIPS

$('document') is a null reference. Remove the quotes so it references the object and not an HTML element named document.

After that, it should work. Also, please include the jQuery lib and include a DOCTYPE...

EDIT: You have several issues with the script. I adjusted it like this:

$(document).ready(function() {

$(".Note").click(function(){
        $(this).closest('table').nextAll("div.divNote").slideToggle();
        });

});

tr has a tbody usually that owns it. it's better to use closest. Also, next gives you the next element, the next element of the table is a br... ​

A number of things is wrong here.

First, jQuery is not included. Include jQuery by adding

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

To your head-tag.

Second, you should reference $(document) without quotes.

Some browsers (Firefox tested) automatically inserts a tbody element. You can check this by doing a console.log($(this).parent().parent()).

A solution is to do $(this).parents("table").nextAll(".divNote").slideToggle();

The problem is both parent() and next(). (I'm assuming that you have jQuery sourced in your HTML and the above code was trimmed for readability.)

The problem with .parent().parent() is that is rendered by the browser as . Notice the extra in there, which was implied by your HTML. You could solve this via .parent().parent().parent(), but a more robust solution would be to use .parents('table').

And for 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.

Your next sibling is
, which does not have the class ".divNote". Your selector therefore returns nothing. You want to use nextAll() instead.

Putting all this together...

$(".Note").click(function(){
    $(this).parents('table')
         .nextAll(".divNote").slideToggle();
});

Working jsFiddle here: http://jsfiddle.net/6WrjH/

You're not including the jquery library there. None of the jquery code will work without that.

You didn't include a reference to jQuery on your page...add it in the head

[EDIT] What you have works..its just isn't showing anything since you are performing a slideToggle on a not visible, empty div. If you change the style so you can see the div and give it a height, the slide toggle is fine.

Also simplify the selection of the divNote like:

$(".divNote").slideToggle("slow");

The problem isn't necessarily in the parent() and next() but more that you are working with a non visible entity

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top