javascript - jquery 获取类的下一个实例的值

Question

我正在尝试使用 jQuery 获取类为 more_details_con、more_details_desc 和 more_details_res 的 div 的值，当 edit_entry 被点击，但我认为我没有正确遍历 DOM，因为警报只是说未定义。

HTML

<div class="details">
    <span class="id">1234</span>
    <span class="contact">account name</span>
</div>

<div class = "more_details">
    <div class = "more_details_btns">
        <div class="go_account">Go to Account</div>
        <div class="edit_entry">Edit</div>
        <div class="delete_entry">Delete</div>
    </div>
    <div class="container">
        <div class="more_details_title">Contact:</div>
        <div class="more_details_con">Contact name</div>
        <p class="clear"></p>
    </div>
    <div class="container">
        <div class="more_details_title">Description:</div>
        <div class="more_details_desc">Actual Description</div>
        <p class="clear">
    </div>
    <div class="container">
        <div class="more_details_title">Resolution:</div>
        <div class="more_details_res">Actual Resolution</div>
        <p class="clear">
    </div>
</div>

我试过的 jQuery

$("#results").on("click", ".edit_entry", function() {
    var contact = $(this).next(".more_details_con").html();
    var desc = $(this).next(".more_details_desc").html();
    var res = $(this).next(".more_details_res").html();
    alert(contact+desc+res);
});

Answer 1

问题是因为您要查找的元素不是引发事件的元素的兄弟元素。您可以使用 closest() 来查找最近的公共(public)父元素，.more_details，然后使用 find() 来获取您想要的元素.试试这个:

$("#results").on("click", ".edit_entry", function() {
    var $parent = $(this).closest('.more_details');
    var contact = $parent.find(".more_details_con").text();
    var desc = $parent.find(".more_details_desc").text();
    var res = $parent.find(".more_details_res").text();

    console.log(contact, desc, res);
});