使用jQuery获取最接近的属性值

HTML:

<div id="admin_chatRoom">
   <div class="msg_box admin-msg-box  1444229594038" style="right: 0px; margin-right: 7px;">
      <div class="msg_head activated" offset="0" c_id="1444229594038"><a id="2" class="closeChat" title="End Chat"><span class="fa fa-ban"></span></a>&nbsp;&nbsp;</div>
      <div style="display: none;" class="msg_wrap display-hide">
         <div class="msg_body">
            <div class="msg_a temp_msg">hio</div>
            <div class="msg_push"></div>
         </div>
         <div class="msg_footer"> <textarea class="msg_input" rows="4"></textarea></div>
      </div>
   </div>
   <div class="msg_box admin-msg-box  1444288416317" style="right: 250px; margin-right: 10px;">
      <div class="msg_head activated" offset="0" c_id="1444288416317"><a id="3" class="closeChat" title="End Chat"><span class="fa fa-ban"></span></a>&nbsp;&nbsp;</div>
      <div style="display: block;" class="msg_wrap display-hide">
         <div class="msg_body">
            <div class="msg_a temp_msg">hio</div>
            <div class="msg_push"></div>
         </div>
         <div class="msg_footer"> <textarea class="msg_input" rows="4"></textarea></div>
      </div>
   </div>
</div>

---

但它显示的是未定义的。有什么想法吗？

首先，

c\u id

属性无效-您应该使用

data-*

属性，以便您的页面不包含无效的HTML标记。其次，

.msg\u head.activated

元素不是

textarea

的直接父元素，因此

closest（）

在这里不适用。最后，

c_id

选择器将查找该类型的元素，而不是具有该属性的元素

$(document).on("keypress", ".admin-msg-box textarea", function (e) {
    if (e.keyCode == 13) {
        var msg = $(this).val();
        var c_id = (($(this).parents('div.msg_box.admin-msg-box')).find('.msg_head.activated')).attr('c_id');
        alert(c_id);
    }
});    

要执行您需要的操作，您可以从

文本区域使用
最近的（）
，以获取最近的包含
.msg\u框
。从那里可以找到具有所需属性的
.msg\u head
，最后可以使用
data（）
读取其值。说了这么多，试试这个：

<div id="admin_chatRoom">
    <div class="msg_box admin-msg-box  1444229594038" style="right: 0px; margin-right: 7px;">
        <div class="msg_head activated" data-offset="0" data-c_id="1444229594038">
            <a id="2" class="closeChat" title="End Chat">
                <span class="fa fa-ban"></span>
            </a>
            &nbsp;&nbsp;
        </div>
        <div style="display: none;" class="msg_wrap display-hide">
            <div class="msg_body">
                <div class="msg_a temp_msg">hio</div>
                <div class="msg_push"></div>
            </div>
            <div class="msg_footer">
                <textarea class="msg_input" rows="4"></textarea>
            </div>
        </div>
    </div>
    <div class="msg_box admin-msg-box 1444288416317" style="right: 250px; margin-right: 10px;">
        <div class="msg_head activated" data-offset="0" data-c_id="1444288416317">
            <a id="3" class="closeChat" title="End Chat">
                <span class="fa fa-ban"></span>
            </a>
            &nbsp;&nbsp;
        </div>
        <div style="display: block;" class="msg_wrap display-hide">
            <div class="msg_body">
                <div class="msg_a temp_msg">hio</div>
                <div class="msg_push"></div>
            </div>
            <div class="msg_footer">
                <textarea class="msg_input" rows="4"></textarea>
            </div>
        </div>
    </div>
</div>

首先，
c\u id
属性无效-您应该使用
data-*
属性，以便页面不包含无效的HTML标记。其次，
.msg\u head.activated
元素不是
textarea
的直接父元素，因此
closest（）
在这里不适用。最后，
c_id
选择器将查找该类型的元素，而不是具有该属性的元素

要执行您需要的操作，您可以从
文本区域使用
最近的（）
，以获取最近的包含
.msg\u框
。从那里可以找到具有所需属性的
.msg\u head
，最后可以使用
data（）
读取其值。说了这么多，试试这个：

<div id="admin_chatRoom">
    <div class="msg_box admin-msg-box  1444229594038" style="right: 0px; margin-right: 7px;">
        <div class="msg_head activated" data-offset="0" data-c_id="1444229594038">
            <a id="2" class="closeChat" title="End Chat">
                <span class="fa fa-ban"></span>
            </a>
            &nbsp;&nbsp;
        </div>
        <div style="display: none;" class="msg_wrap display-hide">
            <div class="msg_body">
                <div class="msg_a temp_msg">hio</div>
                <div class="msg_push"></div>
            </div>
            <div class="msg_footer">
                <textarea class="msg_input" rows="4"></textarea>
            </div>
        </div>
    </div>
    <div class="msg_box admin-msg-box 1444288416317" style="right: 250px; margin-right: 10px;">
        <div class="msg_head activated" data-offset="0" data-c_id="1444288416317">
            <a id="3" class="closeChat" title="End Chat">
                <span class="fa fa-ban"></span>
            </a>
            &nbsp;&nbsp;
        </div>
        <div style="display: block;" class="msg_wrap display-hide">
            <div class="msg_body">
                <div class="msg_a temp_msg">hio</div>
                <div class="msg_push"></div>
            </div>
            <div class="msg_footer">
                <textarea class="msg_input" rows="4"></textarea>
            </div>
        </div>
    </div>
</div>

仅选择直接父母。您尝试选择的div是父级的同级。还可以使用.attr（）方法读取属性值，而不是.val（）

请尝试以下方法：

alert($(this).closest('.admin-msg-box').find('div[c_id]').attr('c_id'));

仅选择直接父母。您尝试选择的div是父级的同级。还可以使用.attr（）方法读取属性值，而不是.val（）

请尝试以下方法：

alert($(this).closest('.admin-msg-box').find('div[c_id]').attr('c_id'));

您不应该使用非标准属性，如
c\u id
。如果您需要自定义属性，请使用数据属性，如
data-c_id
。最近的元素仅查找父元素，而实际上找不到最近的元素，包括父元素/兄弟元素的兄弟元素和子元素。选择最外层的元素并使用findYou不应使用非标准属性，如
c\u id
。如果您需要自定义属性，请使用数据属性，如
data-c_id
。最近的元素仅查找父元素，而实际上找不到最近的元素，包括父元素/兄弟元素的兄弟元素和子元素。选择最外层的元素并使用“查找”