javascript - Why does val() returns undefined?

Question

i try to get the value of the next hidden input field when a button is clicked but my script always returns "undefined". What am i doing wrong and why does val() returns undefined? If only try to select the element with next('input:hidden') the function returns an object.

        <div class="row-fluid">
            <div class="span12">
                <div class="message-ratebox">
                    <ul class="unstyled inline">
                        <li>
                            <button class="rating-button" id="rating-first" value="1">
                                Er will dich
                            </button>1
                        </li>
                        <li>
                            <button class="rating-button" id="rating-second" value="2">
                                Er will dich nicht
                            </button>5
                        </li>
                        <li>
                            <button class="rating-button" id="rating-third" value="3">
                                Es ist alles offen
                            </button>2
                        </li>
                    </ul>
                    <input type="hidden" name="target_message_id" value="1" />
                </div>
            </div>
        </div>
        <div class="row-fluid">
            <div class="span12">
                <div class="message-ratebox">
                    <ul class="unstyled inline">
                        <li>
                            <button class="rating-button" id="rating-first" value="1">
                                Er will dich
                            </button>1
                        </li>
                        <li>
                            <button class="rating-button" id="rating-second" value="2">
                                Er will dich nicht
                            </button>5
                        </li>
                        <li>
                            <button class="rating-button" id="rating-third" value="3">
                                Es ist alles offen
                            </button>2
                        </li>
                    </ul>
                    <input type="hidden" name="target_message_id" value="2" />
                </div>
            </div>
        </div>

JavaScript:

$(document).ready(function() {
    $('button.rating-button').click(function(event) {
        event.preventDefault();
        var $rating = $(this).attr('value');
        var $messageId = $(this).next('input:hidden').val();

        alert('test'+$messageId);
    });
});

Answer 1

It happens because there is no next element for <button>. You have to go up the DOM tree until <div> and find the hidden element:

var $messageId = $(this).closest(".message-ratebox").find("input:hidden").val();

or to go up until <ul> and select the next element:

var $messageId = $(this).closest("ul").next("input:hidden").val();

Answer 2

        $('button.rating-button').click(function(event) {
            event.preventDefault();
            var $rating = $(this).val();
            var $messageId = $(this).parent().parent().parent().find('input').val();
            alert($rating + $messageId );

           });

Answer 3

ボタンから入力のコンテナー (この場合は最も近い div) まで解析してから、非表示の入力まで解析する必要があります...

$('button.rating-button').click(function(event) {
    event.preventDefault();
    var $rating = $(this).val();
    var $messageId = $(this).closest("div").find('input[type=hidden]').val();
    alert($rating + $messageId);
});