Question

我正在尝试使用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

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

未捕获的TypeError：减少没有初始值的空数组在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中的锚标记。

感谢您的帮助。

Answer 1

当前，您使用$('div','a') ~~表示“给我 all div和 all anchor个元素~~。

@RoryMcCrossan在下面的评论中指出：

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

您需要将元素名称连接到一个字符串中，以使选择器为div元素 in 中的所有锚点元素，并使用'hash'选择器（# ）的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>

Answer 2

您忘记在reduce中设置初始值

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

但是我不确定为什么要使用reduce。只需使用join。

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

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

jQuery的方式是map（）和get（）以及join（）

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

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

2 个答案: