javascript - 选择 下的子元素

Question

我在尝试将列表项附加到具有 id 名称的父部分下的类时遇到了此问题。因此，假设我有 2 个具有不同 id 的部分。我想将消息附加到第一部分。这是 HTML 代码。

  <section id="to1" class="privateMsg">
    <p class="toWho">To 1<a href="#" class="close">x</a></p>
    <ul class="messages">  <!-- I want to grab this element -->
      <li>...</li>         <!-- so that I could append message here -->
    </ul>
    <form class="sendPMsg" action="/" method="post">
      <input placeholder="Your message..." type="text">
      <button name="send" type="button" class="sendPrivateBtn">Send</button>
    </form>
  </section>

  <section id="to2" class="privateMsg">
    <p class="toWho">To 2<a href="#" class="close">x</a></p>
    <ul class="messages">  <!-- but not this one -->
      <li>...</li>
    </ul>
    <form class="sendPMsg" action="/" method="post">
      <input placeholder="Your message..." type="text">
      <button name="send" type="button" class="sendPrivateBtn">Send</button>
    </form>
  </section>

如何使用 javaScript 做到这一点？我尝试过:

  var idCheck = 'to'+frmUser;
  var privateChatExist = document.getElementById(idCheck);
  if ( privateChatExist != null) {
    // this is where I have problem
    $(".messages").append('<li><a class="user ' + frmUser + '" href="#">' + frmUser + '</a>: ' + msgContent + '</li></ul>');
  }
  else {
    // add new section
  }

但它附加到两个部分，因为它们都有消息类。我该怎么办？

Answer 1

您可以将第一个选择器从 $(".messages") 更改为 $("#"+ idCheck + ".messages") ，结果是第一个 id 为 $("#to1 .messages") ，第二个 id 为 $("#to2 .messages") ，依此类推