javascript - JS 使用通配符创建数组

Question

所以我有一个 HTML 网格，其中每个框都使用以下约定进行标记。每个框都有一个标记为 row_column 的 ID。我想创建一个扫描文档并返回一个数组的方法，该数组仅包含具有特定列号的框。例如，如果我调用下面的函数，它应该返回一个框数组，如果我用数字 2 调用它，将返回 (1_2, 2_2, 3_2 和 4_2)。

  function getBoxesByColumn(columnNumber){
        return document.getElementById("?_" + columnNumber);
    }

从那里，我将使用该函数以这种方式在另一个函数中创建一个数组:

function test(){
    var boxes = getBoxesByColumn(1);
    console.log(boxes);

但是，当我调用控制台时，它仅打印空值。这是为什么？

编辑:

我的 HTML 示例(包含另外 2 行)

        <div id = "game_background">

        <!-- Row 1 --> 

        <div id = "row_1" class = "row">

            <div id = "1_1" class = "box_empty">
                <p class = "v"></p>
            </div>

            <div id = "1_2" class = "box_empty">
                <p class = "v"></p>
            </div>

            <div id = "1_3" class = "box_empty">
                <p class = "v"></p>
            </div>

            <div id = "1_4" class = "box_empty">
                <p class = "v"></p>
            </div> 

        </div>

        <!-- Row 2 --> 
        <div id = "row_2" class = "row">

            <div id = "2_1" class = "box_empty">
                <p class = "v"></p>
            </div>

            <div id = "2_2" class = "box_empty">
                <p class = "v"></p>
            </div>

            <div id = "2_3" class = "box_empty">
                <p class = "v"></p>
            </div>

            <div id = "2_4" class = "box_empty">
                <p class = "v"></p>
            </div>
        </div>

亚历克斯

Answer 1

可以使用.querySelectorAll()，属性以选择器开头，后代选择器>，属性以选择器结尾

function getBoxesByColumn(columnNumber) {
  return document.querySelectorAll("div[id^=row] > div[id$='" + columnNumber + "']");
}

console.log(getBoxesByColumn(2))

<div id="game_background">

  <!-- Row 1 -->

  <div id="row_1" class="row">

    <div id="1_1" class="box_empty">
      <p class="v"></p>
    </div>

    <div id="1_2" class="box_empty">
      <p class="v"></p>
    </div>

    <div id="1_3" class="box_empty">
      <p class="v"></p>
    </div>

    <div id="1_4" class="box_empty">
      <p class="v"></p>
    </div>

  </div>

  <!-- Row 2 -->
  <div id="row_2" class="row">

    <div id="2_1" class="box_empty">
      <p class="v"></p>
    </div>

    <div id="2_2" class="box_empty">
      <p class="v"></p>
    </div>

    <div id="2_3" class="box_empty">
      <p class="v"></p>
    </div>

    <div id="2_4" class="box_empty">
      <p class="v"></p>
    </div>
  </div>