Target an element in Jquery if it is not inside another element-CodePudding

First fiddle shows the normal way my code works - if click on a span I get data-resendtext from closest .message-bubble element. Not text, but attribute.

$('.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>

OR: http://jsfiddle.net/kt8eavrz/

But occasionally (all data is loaded by ajax) I have a different .message-bubble element with quotation. The next fiddle shows the problem. I would like to get not the attribute data-resendtext from paragraph that is inside .resend_contain but the second one. To be short - not "Another quotation" but "...text Id like to get".

$('.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>

OR: http://jsfiddle.net/je5hyd42/

CodePudding user response：

Use next index -1

old_text = t_msg.find('[data-resendtext]').eq(1).attr('data-resendtext');

CodePudding user response：

You can just use Array.prototype.pop here if you switch to vanilla JS (which I highly recommend, jQuery is really a thing of the past):

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>