Javascript 在<；下选择子元素；第节>；

我在尝试将列表项附加到具有id名称的父节下的类时遇到了这个问题。因此，假设我有两个具有不同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>

到1

…

发送
到2



发送

如何使用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
  }

var idCheck='to'+frmUser；
var privateChatExist=document.getElementById（idCheck）；
if（privateChatExist！=null）{
//这就是我的问题所在
$（“.messages”）.append（“
：”+msgContent+”
）；
}
否则{
//添加新节
}

---

但它附加到这两个部分，因为它们都有messages类。我该怎么做呢？

您可以将第一个选择器从

$（“.messages”）

更改为

$（“#“+idCheck+”.messages”）

，第一个id的值类似于

$（“#到1.messages”）

，第二个id的值类似于

$（“#到2.messages”）

，等等

您需要您的

.message

选择器更具体地反映您希望它反映的部分

$（“#“+idCheck+”>.messages”）

尝试将

$（“.messages”）

替换为

$（“#“+idCheck+”>.messages”）

。这将只提供具有类消息的元素，这些类消息是具有idCheck变量id的元素的子元素。

字符仅用于在特定节点的直接子节点之间执行搜索

还有很多其他方法可以限制jQuery选择器的结果。见：