如何使用 JavaScript 到 select 内容并移动到其他元素？

Question

我需要将一些文本从demoBoxA移动到demoBoxB 。

demoBoxA父元素有一个 id 选择器，但它下面的子元素没有可识别的选择器。

是否可以直接 select 文本内容？ 然后将其移动到demoBoxB子元素中（ demoBoxB子元素有一个 id 选择器）

这个问题有2个困难。

1. demoBoxA的内容由程序动态生成，排序不固定。 子元素没有可识别的选择器。

2. 只需要select部分内容。 例如，在下面的示例中，只需移动“Google”、“Huawei”、“BlackBerry”的手机 model 文本。

任何帮助，在此先感谢！

<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>

Answer 1

您可以像这样链接选择器：

var rows = document.querySelectorAll("#demoBoxA > .row");

这将返回 demoBoxA 内所有行的列表。 如果您需要有关链接选择器的更多信息，可以在此处阅读。

然后，要移动行，您可以这样做：

var demoBoxB = document.getElementById('demoBoxB');

rows.forEach((row) => {
  demoBoxB.appendChild(row);
});

如果您只想要每列内的文本，您可以这样做：

var columns = document.querySelectorAll("#demoBoxA > .col-md-6");
var texts = [];
columns.forEach((column) => {
  texts.push(column.innerText);
});

现在， texts是每列文本内容的数组。

如果你想 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);
  }
});

现在， samsungPhones是一个列列表，每个三星手机都有一个列（例如）。

Answer 2

您可以使用 html 拖动 api。

只需为要拖动的元素添加draggable=true并为dragstart和dragend添加事件侦听器

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

document.addEventListener('dragstart', function(e)
{
    item = e.target;
}, false);

document.addEventListener('dragend', function(e)
{
    document.getElementById("demoBoxB").appendChild(item)
}, false);

注意：您可能需要添加条件来检查是否在 demoboxB 中实际发生了下降