什么是正确的 jquery 选择器语法？答案

【问题标题】：What is the correct jquery selector syntax?什么是正确的 jquery 选择器语法？
【发布时间】：2018-12-21 18:48:45
【问题描述】：

我正在尝试使用 jquery 将每个锚标记中的所有文本聚合到一条消息中。如果它工作正常，我会看到包含以下内容的警报：

high_cases::pool_config::indy_pool_config_request_works_for_disabling_writing high_cases::pool_restart::indy_pool_restart_request_works_for_start_cancel_works

我目前在浏览器控制台中看到此错误：

未捕获的类型错误：减少没有初始值的空数组在 Array.reduce() 在copyAllTestNamesToClipboard

我的 jquery 选择器不正确。正确的语法是什么？

<html>
<head>
<script>
    function copyAllTestNamesToClipboard() {
        var array = new Array();

        $('div','a').each(function(){
            array.push($(this).html());
        });

        var message = array.reduce(function(pre, next) {
            return pre + '\n' + next;
        });

        alert(message);
    }
</script>
</head>
<body>
<div class="panel-heading">
  <h4 class="panel-title">
      <button type="button" class="btn btn-link bnt-sm" onclick="copyAllTestNamesToClipboard()">(Copy)</button>
  </h4>
</div>
<div id="error_group_collapse" class="panel-collapse collapse in">
  <div class="panel-body">
        <div class="panel-body-header">
            <a data-toggle="collapse" href="#t189_error_group_collapse">high_cases::pool_config::indy_pool_config_request_works_for_disabling_writing</a>
        </div>

        <div class="panel panel-info">
            <div id="t189_error_group_collapse" class="panel-collapse collapse in">
                <!-- other stuff -->
            </div>
        </div>

        <div class="panel-body-header">
            <a data-toggle="collapse" href="#t192_error_group_collapse">high_cases::pool_restart::indy_pool_restart_request_works_for_start_cancel_works</a>
        </div>

  </div>
</div>
</body>

另外需要注意的是，我不想只选择 DOM 中的所有锚标记，因为可能存在我不想要的其他锚标记。我只想要带有id="error_group_collapse" 的div 中的锚标记。

谢谢帮助。

【问题讨论】：

你没有在reduce中设置pre的初始值...

标签： jquery

【解决方案1】：

目前你使用$('div','a') ~~它说'给我所有 div和所有 anchor元素~~。

正如@RoryMcCrossan 在下面的评论中指出的那样：

选择器$('div', 'a') 正在寻找div 元素，它们是a 元素的子元素。它只选择那些div，而不是两种类型的元素。

您需要将元素名称连接到一个字符串中，以命令选择器为您提供所有锚元素in div 元素，并使用“哈希”选择器 (#)一个带有 id 的元素。如果您真的希望 id="error_group_collapse" 成为唯一从中获取锚元素的元素，那么您可以更改它：$('#error_group_collapse a')。

（请注意，出于演示目的，我将您的警报替换为console.log 命令，当然您可以只使用您的警报）

function copyAllTestNamesToClipboard() {
  var array = new Array();

  $('#error_group_collapse a').each(function() {
    array.push($(this).html());
  });

  var message = array.reduce(function(pre, next) {
    return pre + '\n' + next;
  });

  console.log(message);
}

<div class="panel-heading">
  <h4 class="panel-title">
    <button type="button" class="btn btn-link bnt-sm" onclick="copyAllTestNamesToClipboard()">(Copy)</button>
  </h4>
</div>
<div id="error_group_collapse" class="panel-collapse collapse in">
  <div class="panel-body">
    <div class="panel-body-header">
      <a data-toggle="collapse" href="#t189_error_group_collapse">high_cases::pool_config::indy_pool_config_request_works_for_disabling_writing</a>
    </div>

    <div class="panel panel-info">
      <div id="t189_error_group_collapse" class="panel-collapse collapse in">
        <!-- other stuff -->
      </div>
    </div>

    <div class="panel-body-header">
      <a data-toggle="collapse" href="#t192_error_group_collapse">high_cases::pool_restart::indy_pool_restart_request_works_for_start_cancel_works</a>
    </div>

  </div>
</div>

【讨论】：

Currently you use $('div','a') which says 'give me all div and all anchor elements 此处稍作修正；该选择器正在寻找div 元素，它们是a 元素的子元素。它只选择那些div，而不是两种类型的元素。
谢谢@RoryMcCrossan！我知道我确实在那里犯了一个小错误。我会在我的回答中指出您的（赞成的）评论。

【解决方案2】：

你忘了在reduce中设置初始值

var message = array.reduce(function(pre, next) {
  return pre + '\n' + next;
}, ''); // <-- forgot that

但我不确定你为什么要使用 reduce。只需使用连接。

var message = array.join('\n')

你的选择器是错误的。它正在寻找锚点内的所有 div。你可能想要：$('div a')

jQuery 方法是 map() 和 get() 和 join()

$('div a')
  .map(function () {
    return $(this).html();
  })
  .get()
  .join('\n')

【讨论】：

谢谢。我认为 reduce 是多余的，但不知道数组还有哪些其他选项。