如何在“每个”循环中更改选择器结果 Download


我有此代码：

var elementSelector = 'select.myClass';
$(elementSelector).each(function(i){
    /*
     * if (several conditions return true) {
     */
        doSomeDOMChanges(); //Change the DOM and add several more <select class="myClass">
    /*
     * }
     */
});

该循环内的问题$(elementSelector)没有重新评估，并且其大小在整个循环中保持不变。例如，$(elementSelector).length仍将保留18，即使在第4次迭代中实际上增加到20。

我的问题是，如何强制JQuery在下一次迭代时重新选择$(elementSelector)（当然，无需“重置”循环/重复先前的迭代）。

谢谢。

2 个答案:

答案 0 :(得分：1)

如果可以确保修改后的DOM内容在文档中的循环发生的时间比循环中当前要访问的元素的时间更远，那么您可以依靠返回 live的DOM方法 NodeList，例如：

  • getElementsByTagName
  • getElementsByClassName
  • getElementsByName
  • children

这里是一个演示，其中当当前select元素的值少于5个字符时，DOM又扩展了一个select元素。新插入的select元素将具有值长1个字符的选项。

function doSomeDOMChanges(select) {
    $(select).after($("<select>").addClass("myClass").append(
        $("<option>").text($(select).val() + "0"),
        $("<option>").text($(select).val() + "1"),
        $("<option>").text($(select).val() + "2")
    ));
}

for (var select of document.getElementsByTagName("select")) {
    if ($(select).is(".myClass")) {
        if ($(select).val().length < 5) {
            doSomeDOMChanges(select);
        }
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="myClass">
    <option>2
    <option selected>3
    <option>5
</select>

缺点：

  • 使用CSS选择器的功能，无法通过调用$()获得这样的实时收集
  • 仅当文档中的DOM更改更远时才起作用。如果对已经在当前迭代元素之后的内容进行了更改，则该循环将无法按预期工作，因为新的DOM元素已插入到当前迭代元素之前的实时集合 中，这意味着它不会被访问，甚至可能更糟：当前元素将移至该集合中的较高索引，并被循环再次访问。

如果这些问题之一是问题，则可以再次选择jQuery，并保留一组您已经访问过的元素。下一个演示使DOM在当前访问的元素之前 发生更改：

function doSomeDOMChanges(select) {
    $(select).before($("<select>").addClass("myClass").append(
        $("<option>").text($(select).val() + "0"),
        $("<option>").text($(select).val() + "1"),
        $("<option>").text($(select).val() + "2")
    ));
}

let visited = new WeakSet;
let selector = "select.myClass";
for (let more = true; more; null) {
    more = false;
    $(selector).each(function() {
        if (visited.has(this)) return;
        visited.add(this);
        if ($(this).val().length < 5) {
            doSomeDOMChanges(this);
            more = true;
        }
    });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="myClass">
    <option>2
    <option selected>3
    <option>5
</select>

答案 1 :(得分：0)

使用属性或某些类标记已使用的类，然后选择未使用的类

var elementSelector = $('select.myClass:not[data-used=1]');
$(elementSelector).each(function(i){

    $(this).data('used', 1)
    if (several condition return true) {
        doSomeDOMChanges(); //Change the DOM and add several more <select class="myClass">
     }


});



Similar searches