Question

假设：(".class")返回nodeList ...

我有一个网格div，其中有五个子div，它们都具有button。当单击button时，div应该会展开，其他的将应用其他样式。 boxToExpand引用了要扩展的div，而boxesToFallInLine应该引用了其他四个div项。但是，我无法实现这一目标。我将所有五个元素都存储在boxesToFallInLine中，然后尝试使用boxesToFallInLine.remove(boxToExpand)，但这似乎不起作用。这是我的代码：

 let btn = $('button');
    btn.on("click", function(){
      let btnId = $(this).attr('id');
      let boxId = boxIdFormat(btnId);
      let boxToExpand = $("#" + boxId); //Element to expand
      //code to expand omitted

      let boxesToFallInLine = $(".box"); //all box elements
      boxesToFallInLine.remove(boxToExpand); //Remove the one that was expanded (This doesn't appear to remove the node)
      boxes.ToFallInline.css("background", "blue"); //Just a test. All five elements are now blue
    });

    //Converts "box1-btn" to "box1"
    function boxIdFormat(btnId){
      return btnId.split('-')[0];
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="grid">
        <div class="box" id = "box1">
            <button id="box1-btn">Expand</button>
          </div>
          <div class="box"  id = "box2">
            <button id="box2-btn">Expand</button>
          </div>
          <div class="box"  id = "box3">
            <button id="box3-btn">Expand</button>
          </div>
    </div>

Answer 1

返回不同的原因是jQuery中的几乎所有内容都是可链接的，因此所有内容都返回“具有相同基本jQuery API的对象”。因此，如果您需要更新项目，请使用$("some query selector").someFunction()之类的remove或css等。这与DOM API HTMLCollection和{{1} }，它们只是对象，无法将DOM或CSSOM操作链接到它们。

关于您的问题：您正在调用NodeList，这是一个在boxIdFormat(btnId)上分割字符串的函数，并且您的HTML没有任何带有连字符的id属性。因此，这显然是行不通的。

直接获取父对象，而不是先弄乱字符串然后再查询重组的字符串来猜测父对象：如果您有对按钮的引用，则按钮会知道其父对象是什么。有了这些知识，您可以形成一个获取所有框的jQuery链，将其中带有单击按钮的框删除（使用not()），然后为其余框修改CSS：

完成，无需猜测。

（对于任何试图将其转变为箭头功能的人，例如$(`button`).click(function() { let cbox = $(this).parent(); // do something with `box` here, like... cbox.css(`background`,`inherit`); // then update everything else: $(".box").not(cbox).css(`background`, `blue`); })：抵制这种冲动。jQuery需要能够为事件处理程序重新绑定执行上下文（即btn.click(evt => {...})指向的内容在函数内部），哪些箭头函数是不允许的，实际上会忽略而没有任何错误或警告）

从节点列表jQuery中删除节点

1 个答案: