时间戳

首页 > 解决方案 > 如果 Jquery 中的元素不在另一个元素内，则以该元素为目标

jquery - 如果 Jquery 中的元素不在另一个元素内，则以该元素为目标

问题描述

第一个小提琴显示了我的代码的正常工作方式 - 如果单击跨度，我会从最近的 .message-bubble 元素中获取 data-resendtext 。不是文字，而是属性。

$('.messages').on('click', '.message__action.message__edit[data-midedit]', function(e) {
    var t_edit = $(this),
        t_msg = t_edit.closest('.message-bubble');
        old_text = t_msg.find('[data-resendtext]').eq(0).attr('data-resendtext');
        alert(old_text);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="messages">
  <div class="message-bubble" data-mid="1">
    <div class="message-bubble-inner">
      <p data-resendtext="First text">Lorem ipsum</p>
    </div>
  <span class="message__action message__edit" data-midedit="1">Click</span>
  </div>
  <div class="message-bubble" data-mid="2">
    <div class="message-bubble-inner">
      <p data-resendtext="Another text">Lorem ipsum</p>
    </div>
  <span class="message__action message__edit" data-midedit="2">Click</span>
  </div>
</div>

或者：http: //jsfiddle.net/kt8eavrz/

但偶尔（所有数据都由 ajax 加载）我有一个不同的 .message-bubble 元素和引号。下一个小提琴显示了这个问题。我不想从 .resend_contain 中的段落中获取属性 data-resendtext ，而是第二个。简而言之 - 不是“另一个报价”，而是“...文本我想得到”。

$('.messages').on('click', '.message__action.message__edit[data-midedit]', function(e) {
    var t_edit = $(this),
        t_msg = t_edit.closest('.message-bubble');
        old_text = t_msg.find('[data-resendtext]').eq(0).attr('data-resendtext');
        alert(old_text);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="messages">
  <div class="message-bubble" data-mid="1">
    <div class="message-bubble-inner">
      <div class="message-text resend_contain">
        <div class="message-text-resend" style="display:none">
          <div class="message-text-resend-text">
            <p data-resendtext="A quotation">A quotation</p>
            <div></div><div></div>
          </div>
        </div>
        <p data-resendtext="First text Id like to get">Lorem ipsum</p>
      </div>
    </div>
  <span class="message__action message__edit" data-midedit="1">Click</span>
  </div>
  <div class="message-bubble" data-mid="2">
    <div class="message-bubble-inner">
      <div class="message-text resend_contain">
        <div class="message-text-resend" style="display:none">
          <div class="message-text-resend-text">
            <p data-resendtext="Another quotation">Another quotation</p>
            <div></div><div></div>
          </div>
        </div>
        <p data-resendtext="Another text Id like to get">Lorem ipsum</p>
      </div>
    </div>
  <span class="message__action message__edit" data-midedit="2">Click</span>
  </div>
</div>

或：http: //jsfiddle.net/je5hyd42/

UPD - 以这种方式制作

    if(t_msg.find('.resend_contain').length !== 0)
    {
        old_text = t_msg.find('[data-resendtext]').eq(1).attr('data-resendtext').trim();
    }
    else
    {
        old_text = t_msg.find('[data-resendtext]').eq(0).attr('data-resendtext').trim();
    }

标签： jquery

解决方案

如果你切换到 vanilla JS，你可以在Array.prototype.pop这里使用（我强烈推荐，jQuery 已经成为过去）：

document.querySelectorAll('.messages').forEach(el => {
  el.addEventListener('click', function(event) {
    if (event.target.matches('.message__action.message__edit[data-midedit]')) {
      t_msg = event.target.closest('.message-bubble');
      old_text = [...t_msg.querySelectorAll('[data-resendtext]')].pop().dataset.resendtext;
      console.log(old_text);
    }
  })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="messages">
  <div class="message-bubble" data-mid="1">
    <div class="message-bubble-inner">
      <div class="message-text resend_contain">
        <div class="message-text-resend" style="display:none">
          <div class="message-text-resend-text">
            <p data-resendtext="A quotation">A quotation</p>
            <div></div>
            <div></div>
          </div>
        </div>
        <p data-resendtext="First text Id like to get">Lorem ipsum</p>
      </div>
    </div>
    <span class="message__action message__edit" data-midedit="1">Click</span>
  </div>
  <div class="message-bubble" data-mid="2">
    <div class="message-bubble-inner">
      <div class="message-text resend_contain">
        <div class="message-text-resend" style="display:none">
          <div class="message-text-resend-text">
            <p data-resendtext="Another quotation">Another quotation</p>
            <div></div>
            <div></div>
          </div>
        </div>
        <p data-resendtext="Another text Id like to get">Lorem ipsum</p>
      </div>
    </div>
    <span class="message__action message__edit" data-midedit="2">Click</span>
  </div>
</div>

推荐阅读