Skip to main content
 首页 » 编程设计

javascript之将所选元素移动到末尾

2025年01月19日10fff_TT

我们有 HTML 代码

<select id="mySelect"> 
 <optgroup label="First group" id="firstGrp"> 
   <option value="One">One</option> 
   <option value="Two">Two</option> 
</optgroup> 
 <optgroup label="Second group" id="secondGrp"> 
   <option value="Three">Three</option> 
   <option value="Six">Six</option> 
   <option value="Four">Four</option> 
   <option value="Five">Five</option> 
 </optgroup> 
</select> 

我要搬家<option value="Six">Six</option><optgroup label="Second group" id="secondGrp"> 结束.

因此,我选择必要的元素并将其删除。

var secondGrp = d3.selectAll("#secondGrp option"); 
var six = secondGrp.filter(function(d, i){ return d === "Six")}) 
six.remove(); 

不幸的是,我不知道如何在 <option value="Six">Six</option> 的末尾添加它.

请您参考如下方法:

我来晚了,但我想在此对话中添加 D3 4.0 中引入的新 lower()raise() 函数.非常简单:

selection.raise() Re-inserts each selected element, in order, as the last child of its parent.

和:

selection.lower() Re-inserts each selected element, in order, as the first child of its parent.

所以,您需要做的就是:

d3.select("[value='Six']").raise(); 

检查这个 fiddle ,您可以单击按钮并查看它的上升和下降:https://jsfiddle.net/gerardofurtado/omk8r7dh/

这里的名称有点困惑,因为“raise”会使“6”在列表中下降,而“lower”会使它上升。