Если дочерний элемент имеет класс, то предупреждение

Question

Я пытаюсь сделать простое действие чата, где я первый пользователь, и вы второй пользователь. Все, что я пытаюсь ввести ввод текста в ul li. условие, если последний ul имеет класс, а затем предупреждаю, что меня еще предупреждают. Прошу совета.

Следующий мой код.

HTML

<div class="chat-left"> 
    <div class="msg-area"> 
     <ul class="me"> 
      <li>what is this msg</li> 
     </ul> 
     <ul class="you"> 
      <li>others message</li> 
     </ul> 
    </div> 
    <form id="me"> 
     <input type="text" name="mymsg" /> 
     <input type="submit" class="submit" name="submit" /> 
    </form> 
</div> 

JQuery

$(document).ready(function() { 
    $('#me').submit(function (event) { 
     event.preventDefault(); 
     console.log('left'); 
     var $mymsg = $('input[type="text"]').val(); 
     $(this).siblings('.msg-area ul').each(function() { 
      if ($(this).hasClass('me')) { 
       console.log('me'); 
      } 
     }); 
    }); 
}); 

Answer 1

Селектор siblings('.msg-area ul') не будет работать, потому что ul не родственный элемент, вам нужно использовать siblings('.msg-area').find('ul')

Вам не нужно иметь цикл, чтобы сделать это

$(document).ready(function() { 
 
    $('#me').submit(function(event) { 
 
    event.preventDefault(); 
 

 
    var mymsg = $(this).find('input[type="text"]').val(); 
 

 
    var $last = $(this).siblings('.msg-area').find('ul:last'); 
 
    if ($last.hasClass('me')) { 
 
     $('#log').html('me') 
 
    } else { 
 
     $('#log').html('you') 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="log"></div> 
 
<div class="chat-left"> 
 
    <div class="msg-area"> 
 
    <ul class="me"> 
 
     <li>what is this msg</li> 
 
    </ul> 
 
    <ul class="me"> 
 
     <li>others message</li> 
 
    </ul> 
 
    </div> 
 
    <form id="me"> 
 
    <input type="text" name="mymsg" /> 
 
    <input type="submit" class="submit" name="submit" /> 
 
    </form> 
 
</div>

Answer 2

Используйте это.

$(this).siblings('.msg-area').find('ul.me').each(function() { 
    console.log('me'); 
});