Javascript 当与text（）结合使用时，使用jQuery迭代JSON返回数字9

我有这样的JSON：

{
    "solution": {
        "1": {
            "cell-1": "1",
            "cell-2": "2",
            "cell-3": "3",
            "cell-4": "4",
            "cell-5": "5",
            "cell-6": "6",
            "cell-7": "7",
            "cell-8": "8",
            "cell-9": "9"
        },
        "2": {
            "cell-1": "1",
            "cell-2": "2",
            "cell-3": "3",
            "cell-4": "4",
            "cell-5": "5",
            "cell-6": "6",
            "cell-7": "7",
            "cell-8": "8",
            "cell-9": "9"
        },
        etc...
    }
}

$.getJSON(validSolution, function(data) {
    $.each(data.solution, function(sectionName, cells) {
        var currentSection = $('[data-section=' + sectionName + ']');
        console.log(currentSection);
        $.each(cells, function(cellName, cellNumber) {
            console.warn(cellNumber);
            currentSection.find('[data-number]').text(cellNumber);
        });
    });
});

-------------
| 9 | 9 | 9 |
-------------
| 9 | 9 | 9 |
-------------
| 9 | 9 | 9 |
-------------

我正在做一个数独游戏，所以有9个部分，每个部分有9个单元格（包含一个数字）。必须使用上面的JSON作为数据源自动填写谜题。我的JS在JSON文件中循环并填写数字，如下所示：

{
    "solution": {
        "1": {
            "cell-1": "1",
            "cell-2": "2",
            "cell-3": "3",
            "cell-4": "4",
            "cell-5": "5",
            "cell-6": "6",
            "cell-7": "7",
            "cell-8": "8",
            "cell-9": "9"
        },
        "2": {
            "cell-1": "1",
            "cell-2": "2",
            "cell-3": "3",
            "cell-4": "4",
            "cell-5": "5",
            "cell-6": "6",
            "cell-7": "7",
            "cell-8": "8",
            "cell-9": "9"
        },
        etc...
    }
}

$.getJSON(validSolution, function(data) {
    $.each(data.solution, function(sectionName, cells) {
        var currentSection = $('[data-section=' + sectionName + ']');
        console.log(currentSection);
        $.each(cells, function(cellName, cellNumber) {
            console.warn(cellNumber);
            currentSection.find('[data-number]').text(cellNumber);
        });
    });
});

-------------
| 9 | 9 | 9 |
-------------
| 9 | 9 | 9 |
-------------
| 9 | 9 | 9 |
-------------

HTML如下所示（以一节为例，共有9节）：

但是，它看起来是这样的：

{
    "solution": {
        "1": {
            "cell-1": "1",
            "cell-2": "2",
            "cell-3": "3",
            "cell-4": "4",
            "cell-5": "5",
            "cell-6": "6",
            "cell-7": "7",
            "cell-8": "8",
            "cell-9": "9"
        },
        "2": {
            "cell-1": "1",
            "cell-2": "2",
            "cell-3": "3",
            "cell-4": "4",
            "cell-5": "5",
            "cell-6": "6",
            "cell-7": "7",
            "cell-8": "8",
            "cell-9": "9"
        },
        etc...
    }
}

$.getJSON(validSolution, function(data) {
    $.each(data.solution, function(sectionName, cells) {
        var currentSection = $('[data-section=' + sectionName + ']');
        console.log(currentSection);
        $.each(cells, function(cellName, cellNumber) {
            console.warn(cellNumber);
            currentSection.find('[data-number]').text(cellNumber);
        });
    });
});

-------------
| 9 | 9 | 9 |
-------------
| 9 | 9 | 9 |
-------------
| 9 | 9 | 9 |
-------------

---

这里有什么问题？我该如何解决？控制台不返回任何错误，所有日志都显示正确的值。循环进行得非常顺利，我可以看到正确的部分、单元格和相应的值，但是当我使用jQuery

text（）

或

html（）

时，它只会将

9

放在任何地方。

我想你的问题在于这一行

currentSection.find('[data-number]').text(cellNumber);

如果您的查找选择了所有单元格，则每次迭代都会替换其中的所有文本

也许您可以引入一个索引变量，如：

var i =0;

。。。 然后在第二个循环中

currentSection.find('[data-number]')[i].innerText = cellNumber;
i++;

我知道有一种方法可以从for-each循环中获取索引，只是不记得如何在上下文中执行。这样做会更好，因为您不必引入新变量

另一种不引入变量的方法是只更改一行：

 currentSection.find('[data-number]')[cellName.replace("cell-", "") - 1].innerText = cellNumber;

---

以下是您必须使用的代码：

<div class="sudoku__body__section" data-section="1">
    <div class="sudoku__body__section__cell" data-cell="1">
        <span class="sudoku__body__section__cell__number" data-number="cell-1"></span>
    </div>
    <div class="sudoku__body__section__cell" data-cell="2">
        <span class="sudoku__body__section__cell__number" data-number="cell-2"></span>
    </div>
    <div class="sudoku__body__section__cell" data-cell="3">
        <span class="sudoku__body__section__cell__number" data-number="cell-3"></span>
    </div>
    <div class="sudoku__body__section__cell" data-cell="4">
        <span class="sudoku__body__section__cell__number" data-number="cell-4"></span>
    </div>
    <div class="sudoku__body__section__cell" data-cell="5">
        <span class="sudoku__body__section__cell__number" data-number="cell-5"></span>
    </div>
    <div class="sudoku__body__section__cell" data-cell="6">
        <span class="sudoku__body__section__cell__number" data-number="cell-6"></span>
    </div>
    <div class="sudoku__body__section__cell" data-cell="7">
        <span class="sudoku__body__section__cell__number" data-number="cell-7"></span>
    </div>
    <div class="sudoku__body__section__cell" data-cell="8">
        <span class="sudoku__body__section__cell__number" data-number="cell-8"></span>
    </div>
    <div class="sudoku__body__section__cell" data-cell="9">
        <span class="sudoku__body__section__cell__number" data-number="cell-9"></span>
    </div>                 
</div>



$.getJSON(validSolution, function(data) {
    $.each(data.solution, function(sectionName, cells) {
        var currentSection = $('[data-section=' + sectionName + ']');
        console.log(currentSection);
        $.each(cells, function(cellName, cellNumber) {
            console.warn(cellNumber);
            currentSection.find('[data-number="' + cellName +'"]').text(cellNumber);
        });
    });
});

$.getJSON（有效解决方案，函数（数据）{
$.each（data.solution，函数（sectionName，cells）{
var currentSection=$（'[data section='+sectionName+']）；
console.log（当前部分）；
$.each（单元、函数（单元名、单元号）{
控制台。警告（手机号码）；
currentSection.find（“[data number=“”+cellName+“]”）文本（cellNumber）；
});
});
});

.find（“[数据编号]”）

选择具有该属性的所有元素。您必须更明确地填写哪个单元格。当我执行

时，查找（'[data number=“'+cellNumber+']”）时，

不会填写任何内容。但同样，控制台中显示的cellNumber显示的是正确的号码。

数据号

没有值，为什么

要查找（“[data number=“”+cellNumber+”]）

选择任何内容？你的意思是

.find（'[data cell=“'+cellNumber+'“]）

？@JJJ这就是我犯的错误。不过，感谢您指出：）当我执行

时。查找（“[data number=“”+cellNumber+”）

没有任何内容被填写。但同样，控制台中显示的手机号码显示的是正确的号码。