在一个函数中为两个 jquery 语句开票答案

【问题标题】：invocing two jquery statements in one function在一个函数中为两个 jquery 语句开票
【发布时间】：2021-03-22 04:29:43
【问题描述】：

函数 user_delete 应该如果值与提供的参数匹配，则循环选择框的选项并获取类名将它们存储在变量中

然后循环遍历文档并删除该特定类的所有元素如果跨度具有该类元素，则异常只删除那个元素的值

查询语句单独工作
将它们插入到 on 函数中似乎没有效果


function user_delete(filename) {
  
     $("#select_updateFile option").each(function(i){
        if ($(this).val() === filename ) {
              var class_name = $(this).attr('class');

        }

        document.querySelectorAll(class_name).forEach(function (e) {
    if ($(e).prev().is("span")) {
        $(e).empty();
    } else {
        e.remove();
     }
}
);


    });

}

【问题讨论】：

有什么理由让 2 个 foreach 嵌套在另一个中？似乎你可以做第一个，将结果添加到一个数组中，然后分别做你对查询选择器所做的事情
后面的逻辑是遍历那个特定的选择框来获取类名
是的，但是你每次都执行嵌套的forloop，对于列表中的每个元素，即使是那些不匹配的元素。

标签： javascript jquery dom

【解决方案1】：

您可以使用选择器在不循环的情况下获取选项的值。

如果该值存在，则查找该类。然后对于 span，将 innerHTML 设置为空。

然后您可以找到具有相同类的非跨度并将它们从 dom 中完全删除。

CSS 只是为了表明 span 为空但仍然存在。

function user_delete(filename) {
   opt = document.querySelector("#select_updateFile option[value='" + filename + "']")
   if(opt){
       _class = opt.getAttribute("class")
       spans = document.querySelectorAll("span." + _class)
       spans.forEach(function(span){
         span.innerHTML = "";
       })
       
       nonspans = document.querySelectorAll("." + _class + ":not(span)")
       nonspans.forEach(function(el){
         el.remove();
       })
   
   }
  }

user_delete("aa")

span.test{display:block;background:red;height:40px;width:140px;}

<span class="test">EMPTY ME</span>

<div class="test">DELETE ME</div>

<select id="select_updateFile">
<option class="test" value="aa">33</option>
<option class="testa" value="bb">22</option>

</select>

【讨论】：