如果子元素有 class 然后警告

Question

我想做一个简单的聊天操作，我是第一个用户，你是第二个用户。我只是想将输入文本放入 ul li。条件如果最后 ul 有 class 我然后提醒我其他提醒你。多多指教。

以下是我的代码。

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

使用这个。

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

Answer 2

选择器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>

如果子元素有 class 然后警告

If child element has class then alert

jquery

chat

appendchild