jquery problem using parent() and next() selectors

jquery parent next

19,448

Solution 1

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();
  });
});

Solution 2

$('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...

Solution 3

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();

Solution 4

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/

View more solutions

19,448

Author by

Amra

Updated on June 14, 2022

Comments

Amra almost 2 years

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.