时间戳

首页 > 解决方案 > 什么是正确的 jquery 选择器语法？

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

问题描述

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

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

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

我的 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 中的所有锚标记，因为可能存在我不想要的其他锚标记。我只想要 div 中的锚标记id="error_group_collapse"。

感谢您的帮助。

标签： jquery

解决方案

目前您使用$('div','a') 的内容是“给我所有 div和所有 anchor元素” 。

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

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

您需要将元素名称连接到一个字符串中，以命令选择器为您提供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>

推荐阅读