blocks|key|2623238|text|这里发生的情况是，您的某些内容只需要为false一次，即可恢复整个select。因此，当找到'b‘时，它确实删除了'b’，但是一旦看到'c‘!==’b‘，它就会恢复整个select。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2623239|您可以通过删除以下代码来实现预期的行为：|2623240|else{
++++$('#myselect').html(initialHTML);
++++console.log('not+matching.+html+restored.');
}|code-block|syntax|javascript|2623241|然而，根据你的最终目标，可能有更好的方法来实现这一点。|2623242|希望这能有所帮助。|2623243|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>What is happening here is that you have something that only needs to be false once to restore the entire select. So it does remove 'b' when it finds it, but then restores the whole select once it sees that 'c' !== 'b'.</p>

<p>You can achive your expected behavior by removing:</p>

<pre><code>else{
    $('#myselect').html(initialHTML);
    console.log('not matching. html restored.');
}
</code></pre>

<p>Depending on what your ultimate goal is, there may be better ways of approaching this, though.</p>

<p>Hope that helps.</p>


blocks|key|2834923|text|试试这个:您不需要其他部分，因为它已经存在，并将您的jquery放在document.ready中，这样它将确保DOM准备就绪，您可以运行jquery脚本。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2834924|var+initialHTML+=+$('#myselect').html();
+++$(document).ready(function(){
+++++$('#myselect+option').each(function(){
++++++++if($(this).text()+==+'b'){
++++++++++++$(this).remove();
++++++++++++console.log('matching.+removed.');
++++++++++++return+false;
++++++++}
++++});
+++});|code-block|syntax|javascript|2834925|JSFiddle|offset|length|2834926|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/2t99w1gb/8/^0|0|0|0|8|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>Try this:
you don't need else part as it is already present and put your jquery inside document.ready so that it will ensure DOM is ready and you can run the jquery script.</p>

<pre><code>var initialHTML = $('#myselect').html();
   $(document).ready(function(){
     $('#myselect option').each(function(){
        if($(this).text() == 'b'){
            $(this).remove();
            console.log('matching. removed.');
            return false;
        }
    });
   });
</code></pre>

<p><a href="https://jsfiddle.net/2t99w1gb/8/" rel="nofollow noreferrer">JSFiddle</a></p>


blocks|key|94043|text|主要问题是这一行：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|94044|$('#myselect').html(initialHTML);|code-block|syntax|javascript|94045|它是为选项a执行的，然后选项b不能再被删除，因为尽管它实际上是相同的，但它已经改变了。因此，删除这行代码就可以正常工作了。|offset|length|style|CODE|94046|$('#myselect+option')构造了一个选项列表，$(this).remove()从列表中删除了选项b，但该列表不再与该超文本标记语言相关联，因为超文本标记语言已经被为选项a执行的$('#myselect').html(initialHTML)所更改。|94047|​|94048|var+initialHTML+=+$('#myselect').html();

$('#myselect+option').each(function()+{
++if+(this.value+===+'b')+{
++++$(this).remove();
++++console.log('matching.+removed.');
++++return+false;
++}+else+{
++++//$('#myselect').html(initialHTML);
++++console.log('not+matching.+html+restored.');
++}
});|94049|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select+id="myselect">
++<option>a</option>
++<option>b</option>
++<option>c</option>
</select>|94050|94051|我将$(this).val()更改为this.value。这两种方法都可以工作，但第二种方法效率更高，因为仅仅为了获取值而将JavaScript对象转换为jQuery对象是没有意义的。|94052|但是，请记住这一行：|94053|return+false;|94054|将导致each()循环在找到匹配项后退出。如果只有一个匹配，这是可以的。如果可以有多个匹配，则删除该行，以便循环可以遍历所有选项。|94055|entityMap^0|0|0|5|1|E|1|0|0|L|V|G|1K|1|2K|1|2O|W|0|0|0|0|0|2|D|I|A|0|0|0|3|6|0^^$0|@$1|2|3|4|5|6|7|15|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|16|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|17|8|@$I|18|J|19|K|L]|$I|1A|J|1B|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|1C|8|@$I|1D|J|1E|K|L]|$I|1F|J|1G|K|L]|$I|1H|J|1I|K|L]|$I|1J|J|1K|K|L]|$I|1L|J|1M|K|L]]|9|@]|A|$]]|$1|O|3|P|5|6|7|1N|8|@]|9|@]|A|$]]|$1|Q|3|R|5|D|7|1O|8|@]|9|@]|A|$E|F]]|$1|S|3|T|5|D|7|1P|8|@]|9|@]|A|$E|F]]|$1|U|3|P|5|6|7|1Q|8|@]|9|@]|A|$]]|$1|V|3|W|5|6|7|1R|8|@$I|1S|J|1T|K|L]|$I|1U|J|1V|K|L]]|9|@]|A|$]]|$1|X|3|Y|5|6|7|1W|8|@]|9|@]|A|$]]|$1|Z|3|10|5|D|7|1X|8|@]|9|@]|A|$E|F]]|$1|11|3|12|5|6|7|1Y|8|@$I|1Z|J|20|K|L]]|9|@]|A|$]]|$1|13|3|-4|5|6|7|21|8|@]|9|@]|A|$]]]|14|$]]

<p>The main issue is this line:</p>

<pre><code>$('#myselect').html(initialHTML);
</code></pre>

<p>It is executed for option <code>a</code> and then option <code>b</code> can no longer be removed because the HTML has changed even though it is actually identical. So remove that line and your code will work.</p>

<p><code>$('#myselect option')</code> constructs a list of options, and <code>$(this).remove()</code> removes option <code>b</code> from the list, but the list is no longer associated with the HTML, because the HTML had been already changed by <code>$('#myselect').html(initialHTML)</code> which was executed for option <code>a</code>.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var initialHTML = $('#myselect').html();

$('#myselect option').each(function() {
  if (this.value === 'b') {
    $(this).remove();
    console.log('matching. removed.');
    return false;
  } else {
    //$('#myselect').html(initialHTML);
    console.log('not matching. html restored.');
  }
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;select id="myselect"&gt;
  &lt;option&gt;a&lt;/option&gt;
  &lt;option&gt;b&lt;/option&gt;
  &lt;option&gt;c&lt;/option&gt;
&lt;/select&gt;</code></pre>
</div>
</div>
</p>

<p>I changed <code>$(this).val()</code> to <code>this.value</code>. Both will work, but the second one is a bit more efficient because there is no point in converting the JavaScript object to a jQuery object just to get the value.</p>

<p>However, remember that the line:</p>

<pre><code>return false;
</code></pre>

<p>will cause the <code>each()</code> loop to exit once a match is found. That's OK if there will only be one match. If there can be more that one match, remove that line so the loop can go through all options.</p>


blocks|key|2623294|text|以下是另一种方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2623295|其他答案已经指出了原因，因为在第一次迭代期间刷新了选项列表，$(this).remove()不再工作，因为它失去了与原始项目的联系。因此，这里的一个简单解决方法是根据目标的值重新选择目标。您可以将$('#myselect').html(initialHTML);的原始代码保留在循环中。|offset|length|style|CODE|2623296|​|2623297|var+initialHTML+=+$('#myselect').html();
$('#myselect+option').each(function(){
++++if($(this).val()+===+'b'){
++++++++$("option[value='"+%2B+$(this).val()+%2B+"']").remove();
++++++++console.log('matching.+removed.');
++++++++return+false;
++++}+else+{+
++++++++$('#myselect').html(initialHTML);
++++++++console.log('not+matching.+html+restored.');
++++}
});|code-block|syntax|javascript|2623298|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select+id="myselect">
++++<option+value='a'>a</option>
++++<option+value='b'>b</option>
++++<option+value='c'>c</option>
</select>|2623299|2623300|entityMap^0|0|U|G|2Q|X|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@$D|V|E|W|F|G]|$D|X|E|Y|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|Z|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|10|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|L|7|11|8|@]|9|@]|A|$M|N]]|$1|Q|3|I|5|6|7|12|8|@]|9|@]|A|$]]|$1|R|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|S|$]]

<p>Here is an alternative way: </p>

<p>Other answers already point out the reason, as because you refresh the option list the during the first iteration, <code>$(this).remove()</code> no longer works because it lose contact of the original item. Thus, a simple fix here would be re-select the target based on it's value. And you can keep your original code of <code>$('#myselect').html(initialHTML);</code> in the loop.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var initialHTML = $('#myselect').html();
$('#myselect option').each(function(){
    if($(this).val() === 'b'){
        $("option[value='" + $(this).val() + "']").remove();
        console.log('matching. removed.');
        return false;
    } else { 
        $('#myselect').html(initialHTML);
        console.log('not matching. html restored.');
    }
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;select id="myselect"&gt;
    &lt;option value='a'&gt;a&lt;/option&gt;
    &lt;option value='b'&gt;b&lt;/option&gt;
    &lt;option value='c'&gt;c&lt;/option&gt;
&lt;/select&gt;</code></pre>
</div>
</div>
</p>


<p>I expected the following code to iterate through a select options and remove options having a certain value, otherwise restore the select html</p>

<pre><code>var initialHTML = $('#myselect').html();

$('#myselect option').each(function(){
    if($(this).val() === 'b'){
        $(this).remove();
        console.log('matching. removed.');
        return false;
    }else{
        $('#myselect').html(initialHTML);
        console.log('not matching. html restored.');
    }
});
</code></pre>

<p>Expected select would be:</p>

<pre><code>&lt;select id="myselect"&gt;
    &lt;option value="a"&gt;a&lt;/option&gt;
    &lt;option value="c"&gt;c&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p>but it actually is</p>

<pre><code>&lt;select id="myselect"&gt;
    &lt;option value="a"&gt;a&lt;/option&gt;
    &lt;option value="b"&gt;b&lt;/option&gt;
    &lt;option value="c"&gt;c&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p>What I'm doing wrong? <a href="https://jsfiddle.net/eLynjy8L/" rel="nofollow noreferrer">FIDDLE</a></p>

<p><strong>Update</strong> e.g. as someone suggested:</p>

<blockquote>
  <p>The <code>$('#myselect option')</code> constructs a list of options, and
  <code>$(this).remove()</code> removes option <code>b</code>, but the list of options is no
  longer linked to the HTML, because the HTML had been already changed
  by <code>$('#myselect').html(initialHTML)</code> which was executed for option
  <code>a</code></p>
</blockquote>

<p>so, I've realised that the actual problem is not even related to what I asked initially in my question. Sorry for that and I'll try to put it in the right section.</p>

<p>p.s. <strong>a working solution</strong>:</p>

<pre><code>var initialHTML = $('#myselect').html();

function doIt(){
    $('#myselect').html(initialHTML);

    $('#myselect option').each(function(){
        if($(this).val() === 'b'){
            $(this).remove();
        }
    });
}
</code></pre>

<p>Thank you so much for help.</p>


jQuery collection gets broken inside each loop (remove elem, restore innerHTML)

jQuery

我希望下面的代码能够遍历select options并移除具有某个值的选项，否则将恢复select htmlvar initialHTML = $('#myselect').html();$('#myselect option').each(function(){    if($(this).val() === 'b'...

问jQuery集合在每个循环中都会中断(删除elem，恢复innerHTML)
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery集合在每个循环中都会中断(删除elem，恢复innerHTML)EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery集合在每个循环中都会中断(删除elem，恢复innerHTML)
EN