用类查找同级元素，并用jQuery替换html内容

Question

我不确定如何获取正确的div来更新以及单击正确的链接。我认为我不了解父级，同级，查找，上一个，下一个等的属性用法。

我正在使用AJAX提交表单，并且需要使用“ record-info”类更新段落标签，然后单击“ cancelas”类的链接。

AJAX：

$('form').on('submit', function(e){
    if($(this).attr('id') == 'editdelete'){
        var thisform = $(this);
        $.ajax({
            type: $(this).attr('method'),
            url: $(this).attr('action'),
            data: $(this).serialize(),
            success: function() {
                var replaceText = thisform.find('input[name="extraedit"]').val();
                console.log(thisform.parent().find('.record-info').html());
                thisform.parent().find('.record-info').html(replaceText);
                thisform.parent().find('.cancelas').click();
            }
        });
        e.preventDefault();
    }
});

replaceText如果我进行console.log，则在控制台中显示正确的信息，但是当我尝试获取'record-info'段落的内容时，它显示为未定义。我已经尝试过.parent（）。find（）、. siblings（）、. next（）、. prev（）以及介于两者之间的所有内容。

这是HTML结构：

<div class="catname record">
    <p class="record-info">Info is here</p>
    <p class="editmain">Edit</p>
    <p class="markmain">Mark</p>
    <form class="markas">FORM IS HERE</form>
    <div class="editas">
        <div>
            <form action="edit-delete.php" id="editdelete" method="post">
                <input name="extraedit" type="text">
            </form>
            <form action="edit-delete.php" id="editdelete" method="post">
                FORM CONTENT
            </form>
        </div>
    </div>
    <p class="cancelas">Cancel</p>
</div>

Answer 1

.record-info 不是您的表单的同级，因此仅获取父项并在其中查找是行不通的。

试试看closest()，它将遍历DOM树直到找到匹配项（其中父级仅遍历一个级别，直到父级）：

thisform.closest('.record').find('.record-info').html(replaceText);

触发点击也是如此：

thisform.closest('.record').find('.cancelas').click();

注意：我.record在closest()这里用过，因为我假设它是您“记录”中的通用类。.closest('.catname')在这种情况下将同样有效。

JSFiddle