Question

我尝试将列表项附加到具有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>

如何使用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")会变为$("#to2 .messages")，第二个选择{{1}}所述

Answer 2

您需要.message选择器更具体地说明您想要反映哪个部分。

$("#"+ idCheck + "> .messages")

Answer 3

尝试将$(".messages")替换为$("#" + idCheck + " > .messages")。这将只为您提供具有类消息的元素，这些消息是具有idCheck变量id的元素的子元素。 >字符仅用于在特定节点或节点的直接子节点之间执行搜索。

还有很多其他方法可以限制jQuery选择器的结果。请参阅：How to select child elements under id in jQuery

在<section> </section>下选择子元素

3 个答案: