[英]How do I use JavaScript to select content and move to other elements?
I need to move some text from demoBoxA
to demoBoxB
.我需要将一些文本从demoBoxA
移动到demoBoxB
。
The demoBoxA
parent element has an id selector, but the child element below it has no identifiable selector. demoBoxA
父元素有一个 id 选择器,但它下面的子元素没有可识别的选择器。
Is it possible to select the text content directly?是否可以直接 select 文本内容? Then move it into the demoBoxB
sub-element (the demoBoxB
sub-element has an id selector)然后将其移动到demoBoxB
子元素中( demoBoxB
子元素有一个 id 选择器)
There are 2 difficulties with this issue.这个问题有2个困难。
The content of demoBoxA is dynamically generated by the program and the sort is not fixed. demoBoxA的内容由程序动态生成,排序不固定。 There are no identifiable selectors for the subelements.子元素没有可识别的选择器。
only need to select part of the content.只需要select部分内容。 For example, in the example below, just move the phone model text of "Google", "Huawei", "BlackBerry".例如,在下面的示例中,只需移动“Google”、“Huawei”、“BlackBerry”的手机 model 文本。
Any help, thanks in advance!任何帮助,在此先感谢!
<div class="container" id="demoBoxA">
<div class="row">
<div class="col-md-6">Samsung</div>
<div class="col-md-6">Galaxy S10</div>
</div>
<div class="row">
<div class="col-md-6">Google</div>
<div class="col-md-6">Pixel 4</div>
</div>
<div class="row">
<div class="col-md-6">Sony</div>
<div class="col-md-6">Xperia 5</div>
</div>
<div class="row">
<div class="col-md-6">Huawei</div>
<div class="col-md-6">Mate 30 5G</div>
</div>
<div class="row">
<div class="col-md-6">BlackBerry</div>
<div class="col-md-6">KEY2</div>
</div>
<div class="row">
<div class="col-md-6">Apple</div>
<div class="col-md-6">iPhone 8</div>
</div>
</div>
<div class="container" id="demoBoxB">
<div class="row">
<div class="col-md-6">Google</div>
<div class="col-md-6" id="pixel"></div>
</div>
<div class="row">
<div class="col-md-6">Huawei</div>
<div class="col-md-6" id="mate"></div>
</div>
<div class="row">
<div class="col-md-6">BlackBerry</div>
<div class="col-md-6" id="key2"></div>
</div>
</div>
You can chain selectors like this:您可以像这样链接选择器:
var rows = document.querySelectorAll("#demoBoxA > .row");
That will return a list of all rows inside of demoBoxA.这将返回 demoBoxA 内所有行的列表。 If you need more info about chaining selectors, you can read about it here .如果您需要有关链接选择器的更多信息,可以在此处阅读。
Then, to move the rows you can do this:然后,要移动行,您可以这样做:
var demoBoxB = document.getElementById('demoBoxB');
rows.forEach((row) => {
demoBoxB.appendChild(row);
});
If you just want the text inside each of the columns, you can do this:如果您只想要每列内的文本,您可以这样做:
var columns = document.querySelectorAll("#demoBoxA > .col-md-6");
var texts = [];
columns.forEach((column) => {
texts.push(column.innerText);
});
Now, texts
is an array of the text contents of each column.现在, texts
是每列文本内容的数组。
If you want to select the cellphone models for each brand, you can do this:如果你想 select 每个品牌的手机型号,你可以这样做:
var cols = Array.from(document.querySelectorAll("#demoBoxA > .col-md-6"));
var samsungCol = cols.find((col) => {
return col.textContent == "Samsung";
});
var samsungPhones = [];
samsungCol.parentNode.childNodes.forEach((col) => {
if (col != samsungCol) {
samsungPhones.push(col);
}
});
Now, samsungPhones
is a list of columns, one for each Samsung phone (for example).现在, samsungPhones
是一个列列表,每个三星手机都有一个列(例如)。
You can use html drag api.您可以使用 html 拖动 api。
Just add draggable=true
for elements you want to drag and add event listeners for dragstart
and dragend
只需为要拖动的元素添加draggable=true
并为dragstart
和dragend
添加事件侦听器
html html
<div class="container" id="demoBoxA">
<div class="row " draggable="true">
<div class="col-md-6">Samsung</div>
<div class="col-md-6">Galaxy S10</div>
</div>
<div class="row" draggable="true">
<div class="col-md-6">Google</div>
<div class="col-md-6">Pixel 4</div>
</div>
<div class="row" draggabble="true">
<div class="col-md-6">Sony</div>
<div class="col-md-6">Xperia 5</div>
</div>
</div>
<div class="container " id="demoBoxB">
<div class="row " draggable="true">
<div class="col-md-6">Google</div>
<div class="col-md-6" id="pixel"></div>
</div>
<div class="row" draggable="true">
<div class="col-md-6">Huawei</div>
<div class="col-md-6" id="mate"></div>
</div>
<div class="row" draggable="true">
<div class="col-md-6">BlackBerry</div>
<div class="col-md-6" id="key2"></div>
</div>
</div>
js js
document.addEventListener('dragstart', function(e)
{
item = e.target;
}, false);
document.addEventListener('dragend', function(e)
{
document.getElementById("demoBoxB").appendChild(item)
}, false);
Note: you might have to add conditions to check whether the drop is actually happening in demoboxB注意:您可能需要添加条件来检查是否在 demoboxB 中实际发生了下降
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.