如何使用 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 中實際發生了下降