Почему не находится указанный элемент в DOM?

Question

[vigaset12]

console.log($(this).parents('.comments__item').next('.comments__message').text());

Помоги пожалуйста. Хотелось бы еще узнать, как можно взять данные с элементов comments__people блока?

Comments

[Ankhena]

1. id не может повторяться в рамках страницы
2. Изменить и удалить - семантически это кнопки, а не p.

console.log($(this).parent('.comments__control').next('.comments__message').text());

Хотелось бы еще узнать, как можно взять данные с элементов comments__people блока?

Заменить next на prev

[vigaset12]

Ankhena, Спасибо!

[vigaset12]

Ankhena, Извините пожалуйста, вы не могли бы помочь мне с другой проблемой?

function changeComment(){
    $('.create-comments').addClass('hidden');
    $('.change-comments').addClass('visible');

    var _this = $(this);
    _this.toggleClass('translucent');


    var name = $('.change-comments__input--name').val($(this).parents('.comments__item').find('.comments__name').text());
    var surname = $('.change-comments__input--surname').val($(this).parents('.comments__item').find('.comments__surname').text());
    var message = $('.change-comments__input--message').val($(this).parents('.comments__item').find('.comments__message').text());

    $('.change-comments__button').click(function(e){
        e.preventDefault();
        $.ajax({
            url: `../../php/change_comment.php`,
            type: 'POST',
            dataType: 'json',
            data: {
                id: _this.attr('id'),
                name: name.val(),
                surname: surname.val(),
                message: message.val()        
            },
    
            success: function (result){
                _this.parents('.comments__item').remove();
                $(".comments__body").append(`
                <div class="comments__item">
                    <div class="comments__people">
                        <div class="comments__name">${result.comments[0].name}</div>
                        <div class="comments__surname">${result.comments[0].surname}</div>
                    </div>
                    <div class="comments__control">
                        <p class="comments__change" id="${result.comments[0].id}">Изменить</p>
                        <p class="comments__delete" id="${result.comments[0].id}">Удалить</p>
                    </div>
                    <div class="comments__message">${result.comments[0].message}</div>
                </div>
                `);
    
                initButtons();
            }
        }); 
    });
}


function initButtons(){
    const changeButtons = $(document).find('.comments__change');
    const deleteButtons = $(document).find('.comments__delete');

    changeButtons.click(changeComment);
    deleteButtons.click(deleteComment);
    $('.create-comments__button').click(addComment);
}


initButtons();

Когда я два раза нажму на .change-comments__button, то у меня создается такой же комментарий на сайте, ну не в бд. Я подозреваю что некорректно работает это область кода:

success: function (result){
                _this.parents('.comments__item').remove();
                $(".comments__body").append(`
                <div class="comments__item">
                    <div class="comments__people">
                        <div class="comments__name">${result.comments[0].name}</div>
                        <div class="comments__surname">${result.comments[0].surname}</div>
                    </div>
                    <div class="comments__control">
                        <p class="comments__change" id="${result.comments[0].id}">Изменить</p>
                        <p class="comments__delete" id="${result.comments[0].id}">Удалить</p>
                    </div>
                    <div class="comments__message">${result.comments[0].message}</div>
                </div>
                `);
    
                initButtons();
            }

Answer 1

[Rsa97]

Потому что .comments__message является не следующим сиблингом, а потомком для .comments__item.
Соответственно, нужен не .next(), а .find().