多ID选择器答案

【问题标题】：Multi id selector多ID选择器
【发布时间】：2018-08-15 00:20:12
【问题描述】：

$('body').append($('#add-done-modal, #add-failed-modal', data));

此代码应将div 与id add-done-modal 和add-failed-modal 附加到body。那些div 在data 中提供服务。我确信data 中的html 非常好，而且是有意的。代码永远找不到id。我正在使用 jQuery 3.3.1。我知道类是一种解决方案，但由于可以根据客户调用选择或不选择各种模式，因此会相当笨拙。

编辑：一个简单的$('#add-done-modal', data) 返回一个空的jQuery 对象。我再次确定#add-done-modal 在data 中。

编辑：此函数由 clickevent 调用：

function popup(url, name) {
  $.get(url, (data) => {
    $('#loading-modal .modal-body').html($('#product', data));
    // Can't find '#add-done-modal' nor '#add-failed-modal'
    let x = $('#add-done-modal', data);
    x = $('#add-failed-modal', data);
    $('body').append($('#add-done-modal, #add-failed-modal', data));
    // Initialize jQuery-UI or Bootstrap stuff loaded above here. Working.
  });

  $('#loading-modal .modal-header .modal-title').html(name);
  $('#loading-modal').modal('show');
}

这里是 AJAX 调用返回的内容：

<!DOCTYPE html>
<html lang="fr">
  <head>
    <!-- Head stuff -->
  </head>
  <body>
    <div id="all">
      <div class="top-bar">
        <div class="container">
          <div class="row d-flex align-items-center">
            <div class="col-8 col-lg-9">
              <form action="/updatelocale/" method="POST">
                <select class="bs-select" onchange="this.form.submit();">
                  <!-- Locale options, can be disregarded -->
                </select>
              </form>
            </div>
            <div class="col justify-content-md-end">
              <div class="row">
                <!-- Login and some buttons, not used -->
              </div>
            </div>
          </div>
        </div>
      </div>
      <header class="nav-holder make-sticky">
        <div id="navbar" role="navigation" class="navbar navbar-expand-lg">
          <!-- A pretty navbar -->
        </div>
      </header>
      <div id="heading-breadcrumbs">
        <!-- Cute breadcrumbs -->
      </div>
      <div id="content">
        <!-- Product, loading this from data works -->
        <div id="product" class="container">
          <div id="productMain" class="row">
            <!-- Stuff inside #product -->
          </div>
        </div>
      </div>
      <footer class="main-footer">
        <!-- Pretty footer -->
      </footer>
    </div>
    <!-- Modal #add-done-modal -->
    <div id="add-done-modal" tabindex="-1" role="dialog" aria-labelledby="add-done-modalLabel" aria-hidden="true" class="modal fade">
      <div role="document" class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h4 id="add-done-modalLabel" class="modal-title">cart.add.done</h4>
            <button type="button" data-dismiss="modal" aria-label="Close" class="close"><span aria-hidden="true">×</span></button>
          </div>
          <div class="modal-body">cart.add.done.long</div>
          <div class="modal-footer"><button data-dismiss="modal" class="btn">modal.close</button></div>
        </div>
      </div>
    </div>
    <!-- Modal #add-failed-modal -->
    <div id="add-failed-modal" tabindex="-1" role="dialog" aria-labelledby="add-failed-modalLabel" aria-hidden="true" class="modal fade">
      <div role="document" class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h4 id="add-failed-modalLabel" class="modal-title">cart.add.failed</h4>
            <button type="button" data-dismiss="modal" aria-label="Close" class="close"><span aria-hidden="true">×</span></button>
          </div>
          <div class="modal-body">cart.add.failed.long</div>
          <div class="modal-footer"><button data-dismiss="modal" class="btn">modal.close</button></div>
        </div>
      </div>
    </div>
    <div id="login-modal" tabindex="-1" role="dialog" aria-labelledby="login-modalLabel" aria-hidden="true" class="modal fade">
      <div role="document" class="modal-dialog">
        <!-- I don't care about this modal -->
      </div>
    </div>
  </body>
</html>

编辑：这是带有一些测试的fiddle。在将文档渲染到 DOM 之后，$('#add-done-modal, #add-failed-modal') 和 $('#add-done-modal') 会先找到模态框，然后才会找不到。在带有静态 HTML 的第二个 fiddle 中，我检查了是否找到了模态框。

对 HTML 字符串的 jQuery 上下文长度有任何限制吗？

【问题讨论】：

你做了什么调试？你检查$('#add-done-modal, #add-failed-modal', data)的结果了吗？
请注意data 必须是Element 或jQuery 对象...api.jquery.com/jQuery/#jQuery-selector-context
@Phil 是的，我做到了。 “代码永远找不到id。” $('#add-done-modal, #add-failed-modal') 除了div 在data 中之外，什么都找不到。
@MikeMcCaughan 不，它没有。也可以是不在document中的html字符串。
@AlexandreParent 它到底在哪里说它可以是 HTML 字符串？ documentation 明确指出 “用作上下文的 DOM 元素、文档或 jQuery” 也许您应该尝试使用 let context = $(data) 并使用它

标签： jquery html jquery-3

【解决方案1】：

如果您想正确处理 HTML 字符串，我建议将其解析为文档，例如

const domParser = new DOMParser()
const doc = domParser.parseFromString(data, 'text/html')

然后在你的 jQuery 选择器中使用doc，例如

$('#add-done-modal', doc)

当 jQuery 遇到上下文时，它只是将表达式转换为...

jQuery(context).find(selector)

见https://github.com/jquery/jquery/blob/3.3.1/src/core/init.js#L99

这里的问题是 jQuery 将整个文档解析为一个 jQuery 对象，该对象包含<body> 下的顶级元素。见http://api.jquery.com/jQuery/#jQuery2

但如果字符串看起来是 HTML sn-p，jQuery 会尝试按照 HTML 的描述创建新的 DOM 元素

例如，将您的 HTML 作为字符串...

$(html)

给我一个包含 15 个元素的 jQuery 对象，大部分是空文本和一些注释节点，但包括

#3  <div id="all">...</div>
#7  <div id="add-done-modal"...>...</div>
#11 <div id="add-failed-modal"...>...</div>
#13 <div id="login-modal"...>...</div>

将此对象用作选择器context，您可以找到属于这 5 个子元素的元素，但不能找到这些元素本身。这就是为什么您可以找到例如#product 的原因。

【讨论】：

我不知道你可以在内存中创建 document... 考虑到 jQuery 会在解析 HTML 后找到选择器，这很可能是解决方案。
@AlexandreParent 是的，我感觉它不会。不过这似乎很奇怪。
第二种解决方案有效！我可以建议您删除第一个解决方案吗？你的猜测是错误的，因为它确实适用于字符串中更高的元素。
不，我会离开它。就像我说的，它应该工作:)
@AlexandreParent 有时它使用它来解析/格式化传递给success 回调的data（例如'json'）。不过对于'html'（我只是在文档中读到了这个），结果是一个HTML 字符串。为什么 jQuery 无法将该字符串用作上下文，我不确定，但 $(data) 也不会产生任何有用的结果，这是我上面 "guess" 的基础