JS用通配符创建数组答案

【问题标题】：JS creating array with wildcardsJS用通配符创建数组
【发布时间】：2017-02-04 16:43:02
【问题描述】：

所以我有一个 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>

亚历克斯

【问题讨论】：

请点击编辑器中的<>按钮并提供minimal reproducible example。
请分享您的html
编辑添加html
这很简单，但你几乎肯定最好给那些孩子divs 一个课程（或者使用box_empty，如果它是可靠的）然后使用Element#querySelectorAll on他们的父母。
基本上我正在尝试重新创建 2048 游戏。 box_empty 类是控制 the 的着色，而 v 类是每个盒子内的值。您是否建议为每个盒子 div 设置第二个不同的类？如果每个类都有独特的价值，那么拥有一个类有什么意义？

标签： javascript arrays wildcard

【解决方案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>

【讨论】：

把div去掉就行了，没必要
对于所有 CSS 选择器，这里有一个 reference
注意，如果预期结果实际上是一个数组，请将.querySelectorAll() 传递给Array.from()
@ibrahimmahrir “把div去掉就行了，没必要”没必要，虽然是为了特异性。
@alexp2603 "div[id $= '_" + columnNumber + "']:not([id ^= 'row'])" 应该这样做！检查此link。它包含所有 CSS SELECTORS 的参考！

【解决方案2】：

简单地说，你需要做的是找到所有具有列号的 id 的 div，然后迭代它们以找到你想要的给定数字。

function getBoxesByColumn(columnNumber){
    var elems = document.getElementsByTagName('div'); // Get all divs
    var arr = [];
    for(i in elems){ // Iterate all elems
        // Check if element contains the column number
        if(elems[i].id 
        && elems[i].id.indexOf(columnNumber) != -1 
        && elems[i].id.indexOf('row') == -1){
            arr.push(elems[i]) // Push the element to the arr
        }
    }
    return arr; // Return arr
}

https://jsfiddle.net/34v7v0pw/

【讨论】：