我正在创建一个应用程序，该应用程序从网页中获取元素并导出json数据。
我使用jQuery选择所有父元素，并对它们进行迭代。但是我需要在迭代之前对集合进行排序，这样json导出器就可以按照特定的顺序对对象进行排序，并且我需要根据嵌套子对象的输入值进行排序。
我不想更改实际的DOM，所以到目前为止，我的尝试是使用toArray((将jQuery集合转换为实际的数组，但我不确定这是否有意义。我一直在尝试根据这个数组中嵌套输入的值对父元素进行排序。
这是我失败的排序尝试：
//select all blockWraps
let blockWraps = $('.blockWrap');
beforeSort = blockWraps;
jqueryArray = blockWraps.toArray();
//lets try to sort to storyId order
function getSorted(arrayToSort) {
return arrayToSort.sort(function (a, b) {
console.log();
var aVal = parseInt(a.children[1].children[1].children[0].children[1]),
bVal = parseInt(b.children[1].children[1].children[0].children[1]);
return aVal - bVal;
});
}
afterSort = getSorted(jqueryArray);
我目前的尝试非常糟糕，因为如果某些元素有不同数量的子元素，它很容易失败。
接下来，我将从jQuery数组中的单个父元素粘贴一个示例元素。假设我的数组中有六种这样的元素。我该如何对六个"进行排序"；。blockWrap"；基于类"的输入的值在存储器中(但不是在DOM中(的元素；。blockid"；？下面是数组中整个父元素的样子(数组中有几个blockWrap父元素，但我不想不必要地重复代码(：
<div class="blockWrap characterRoot ui-draggable ui-draggable-handle" style="left: 0px; top: 2px;"><div class="line" data-block1="id0" data-block2="id1" data-buttonindextoconnectto="0" style="position: absolute; transform: rotate(54.0234deg); width: 123.068px; top: 210.906px; left: 196.297px;"></div>
<div class="contentWrap">
<div style="display: flex; align-items:center; justify-content: center;">
<div class="topConnectionSocket">o</div>
</div>
<div id="id0" class="block">
<div style="text-align: left;">
<span style="width: 15%; display:inline-block; text-align: right;">ID:</span><input class="blockid" style="width: 15%; display:inline-block;" readonly="" type="number" value="1">
</div>
<input type="text" class="characterName elementInfoField" placeholder="character name" value="MIKE">
<select name="blockType" class="selectBlockType">
<option value="line">Line</option>
<option value="question">Question</option>
<option value="fight">Fight</option>
</select>
<textarea class="dialogue" placeholder="Type the dialogue here" value="FIRST NODE" style="box-sizing: border-box;"></textarea>
<div>
<div class="optionsUnderDialogue" style="text-align: right;">
<div class="option1"></div>
<div class="option2"></div>
<div class="option3">
<span style=" text-align: right;">Next:</span><input class="next" style="display:inline-block;" type="number">
</div>
</div>
</div>
</div>
<div class="plusButtonContainer" style="display: flex; align-items: end; justify-content: center;">
<div class="blockPlusButton disabled" data-buttonindex="0" data-acceptclicks="false">-</div>
</div>
</div><!-- end contentwrap -->
<div class="blockWrap ui-draggable ui-draggable-handle" style="top: 294.969px; left: 145.297px;"><div class="line" data-block1="id1" data-block2="id2" data-buttonindextoconnectto="0" style="position: absolute; transform: rotate(166.449deg); width: 83.6247px; top: 218.969px; left: 125.282px;"></div>
<div class="contentWrap">
<div style="display: flex; align-items:center; justify-content: center;">
<div class="topConnectionSocket">o</div>
</div>
<div id="id1" class="block">
<div style="text-align: left;">
<span style="width: 15%; display:inline-block; text-align: right;">ID:</span><input class="blockid" style="width: 15%; display:inline-block;" readonly="" type="number" value="2">
</div>
<input type="text" class="characterName elementInfoField" placeholder="character name" value="MIKE">
<select name="blockType" class="selectBlockType">
<option value="line">Line</option>
<option value="question">Question</option>
<option value="fight">Fight</option>
</select>
<textarea class="dialogue" placeholder="Type the dialogue here" style="box-sizing: border-box;">CHILD NODE FOR TESTING</textarea>
<div>
<div class="optionsUnderDialogue" style="text-align: right;">
<div class="option1"></div>
<div class="option2"></div>
<div class="option3">
<span style=" text-align: right;">Next:</span><input class="next" style="display:inline-block;" type="number">
</div>
</div>
</div>
</div>
<div class="plusButtonContainer" style="display: flex; align-items: end; justify-content: center;">
<div class="blockPlusButton disabled" data-buttonindex="0" data-acceptclicks="false">-</div>
</div>
</div>
<div class="blockWrap ui-draggable ui-draggable-handle" style="top: 225.969px; left: -120.703px;"><div class="line" data-block1="id2" data-block2="id5" data-buttonindextoconnectto="2" style="position: absolute; transform: rotate(4.05637deg); width: 276.991px; top: 223.956px; left: 216px;"></div><div class="line" data-block1="id2" data-block2="id4" data-buttonindextoconnectto="1" style="position: absolute; transform: rotate(14.4028deg); width: 78.7726px; top: 223.812px; left: 184px;"></div><div class="line" data-block1="id2" data-block2="id3" data-buttonindextoconnectto="0" style="position: absolute; transform: rotate(166.449deg); width: 83.6247px; top: 218.969px; left: 151.985px;"></div>
<div class="contentWrap">
<div style="display: flex; align-items:center; justify-content: center;">
<div class="topConnectionSocket">o</div>
</div>
<div id="id2" class="block selected">
<div style="text-align: left;">
<span style="width: 15%; display:inline-block; text-align: right;">ID:</span><input class="blockid" style="width: 15%; display:inline-block;" readonly="" type="number" value="3">
</div>
<input type="text" class="characterName elementInfoField" placeholder="character name" value="MIKE">
<select name="blockType" class="selectBlockType">
<option value="line">Line</option>
<option value="question">Question</option>
<option value="fight">Fight</option>
</select>
<textarea class="dialogue" placeholder="Type the question" style="box-sizing: border-box;">CHILD NODE FOR TESTING</textarea>
<div>
<div class="optionsUnderDialogue" style="text-align: right;">
<div class="option1">
Answers: <input class="answerNumber" type="number" min="2" max="9" value="3">
</div>
<div class="option2"></div>
<div class="option3">
<span style=" text-align: right;">Next:</span><input class="next" style="display:inline-block;" type="number">
</div>
</div>
</div>
</div>
<div class="plusButtonContainer" style="display: flex; align-items: end; justify-content: center;">
<div class="blockPlusButton disabled" data-buttonindex="0" data-acceptclicks="false">-</div>
<div class="blockPlusButton disabled" data-buttonindex="1" data-acceptclicks="false">-</div><div class="blockPlusButton disabled" data-buttonindex="2" data-acceptclicks="false">-</div></div>
</div>
<div class="blockWrap ui-draggable ui-draggable-handle" style="top: 225.969px; left: -94px;">
<div class="contentWrap">
<div style="display: flex; align-items:center; justify-content: center;">
<div class="topConnectionSocket">o</div>
</div>
<div id="id3" class="block">
<div style="text-align: left;">
<span style="width: 15%; display:inline-block; text-align: right;">ID:</span><input class="blockid" style="width: 15%; display:inline-block;" readonly="" type="number" value="3">
</div>
<input type="text" class="characterName elementInfoField" placeholder="character name" value="MIKE">
<select name="blockType" class="selectBlockType">
<option value="answer0">answer</option>
</select>
<textarea class="dialogue" placeholder="Type the answer option here" style="box-sizing: border-box;">CHILD NODE FOR TESTING</textarea>
<div>
<div class="optionsUnderDialogue" style="text-align: right;">
<div class="option1"></div>
<div class="option2"></div>
<div class="option3">
<span style=" text-align: right;">Next:</span><input class="next" style="display:inline-block;" type="number">
</div>
</div>
</div>
</div>
<div class="plusButtonContainer" style="display: flex; align-items: end; justify-content: center;">
<div class="blockPlusButton" data-buttonindex="0" data-acceptclicks="true">+</div>
</div>
</div>
</div><div class="blockWrap ui-draggable ui-draggable-handle" style="top: 225.969px; left: 138px;">
<div class="contentWrap">
<div style="display: flex; align-items:center; justify-content: center;">
<div class="topConnectionSocket">o</div>
</div>
<div id="id4" class="block">
<div style="text-align: left;">
<span style="width: 15%; display:inline-block; text-align: right;">ID:</span><input class="blockid" style="width: 15%; display:inline-block;" readonly="" type="number" value="3">
</div>
<input type="text" class="characterName elementInfoField" placeholder="character name" value="MIKE">
<select name="blockType" class="selectBlockType">
<option value="answer1">answer</option>
</select>
<textarea class="dialogue" placeholder="Type the answer option here" style="box-sizing: border-box;">CHILD NODE FOR TESTING</textarea>
<div>
<div class="optionsUnderDialogue" style="text-align: right;">
<div class="option1"></div>
<div class="option2"></div>
<div class="option3">
<span style=" text-align: right;">Next:</span><input class="next" style="display:inline-block;" type="number">
</div>
</div>
</div>
</div>
<div class="plusButtonContainer" style="display: flex; align-items: end; justify-content: center;">
<div class="blockPlusButton" data-buttonindex="0" data-acceptclicks="true">+</div>
</div>
</div>
</div><div class="blockWrap ui-draggable ui-draggable-handle" style="top: 225.969px; left: 371px;"><div class="line" data-block1="id5" data-block2="id6" data-buttonindextoconnectto="0" style="position: absolute; transform: rotate(166.449deg); width: 83.6247px; top: 212.969px; left: 122.282px;"></div>
<div class="contentWrap">
<div style="display: flex; align-items:center; justify-content: center;">
<div class="topConnectionSocket">o</div>
</div>
<div id="id5" class="block">
<div style="text-align: left;">
<span style="width: 15%; display:inline-block; text-align: right;">ID:</span><input class="blockid" style="width: 15%; display:inline-block;" readonly="" type="number" value="3">
</div>
<input type="text" class="characterName elementInfoField" placeholder="character name" value="MIKE">
<select name="blockType" class="selectBlockType">
<option value="answer2">answer</option>
</select>
<textarea class="dialogue" placeholder="Type the answer option here" style="box-sizing: border-box;">CHILD NODE FOR TESTING</textarea>
<div>
<div class="optionsUnderDialogue" style="text-align: right;">
<div class="option1"></div>
<div class="option2"></div>
<div class="option3">
<span style=" text-align: right;">Next:</span><input class="next" style="display:inline-block;" type="number">
</div>
</div>
</div>
</div>
<div class="plusButtonContainer" style="display: flex; align-items: end; justify-content: center;">
<div class="blockPlusButton disabled" data-buttonindex="0" data-acceptclicks="false">-</div>
</div>
</div>
<div class="blockWrap ui-draggable ui-draggable-handle" style="top: 219.969px; left: -123.703px;">
<div class="contentWrap">
<div style="display: flex; align-items:center; justify-content: center;">
<div class="topConnectionSocket">o</div>
</div>
<div id="id6" class="block">
<div style="text-align: left;">
<span style="width: 15%; display:inline-block; text-align: right;">ID:</span><input class="blockid" style="width: 15%; display:inline-block;" readonly="" type="number" value="4">
</div>
<input type="text" class="characterName elementInfoField" placeholder="character name" value="MIKE">
<select name="blockType" class="selectBlockType">
<option value="line">Line</option>
<option value="question">Question</option>
<option value="fight">Fight</option>
</select>
<textarea class="dialogue" placeholder="Type the dialogue here" style="box-sizing: border-box;">CHILD NODE FOR TESTING</textarea>
<div>
<div class="optionsUnderDialogue" style="text-align: right;">
<div class="option1"></div>
<div class="option2"></div>
<div class="option3">
<span style=" text-align: right;">Next:</span><input class="next" style="display:inline-block;" type="number">
</div>
</div>
</div>
</div>
<div class="plusButtonContainer" style="display: flex; align-items: end; justify-content: center;">
<div class="blockPlusButton" data-buttonindex="0" data-acceptclicks="true">+</div>
</div>
</div>
</div></div></div></div></div>
最后，让我说，我的整个方法可能不必要地复杂，很可能遗漏了一些显而易见的东西。
由于传递给排序回调函数的a和b是DOM元素，因此可以在它们上调用类似querySelector的方法。
因此，与其试图通过其特定的"；位置"；在子代结构中，您可以通过它的类来选择它，然后获得它的值：
a.querySelector('.blockid').value