我有以下結構示例：

<div class="main">
    <div class="image">Image1</div>
    <div class="image">Image2</div>
    <div class="image">Image3</div>
</div>
<div class="side">
    <div class="Banner">Banner1</div>
    <div class="Banner">Banner2</div>
    <div class="Banner">Banner3</div>
    <div class="Banner">Banner4</div>
</div>

我想制作一個腳本，將每個橫幅放在每個影像下。

    <div class="main">
        <div class="image">Image1</div>
        <div class="Banner">Banner1</div>
        <div class="image">Image2</div>
        <div class="Banner">Banner2</div>
        <div class="image">Image3</div>
        <div class="Banner">Banner3</div>
        <div class="Banner">Banner4</div>
    </div>
 <div class="side"></div>

基本上有一些影像一個接一個地放置，然后一些橫幅一個接一個地放置。

圖片1 圖片2 圖片3 橫幅1 橫幅2 橫幅3 橫幅4

我需要拍攝每張橫幅并將其放在每張圖片下方，這樣我就可以擁有：

圖片1 橫幅1 圖片2 橫幅2 圖片3 橫幅3 橫幅4

我無法將 html 更改為手動放置橫幅，我需要使用更高級的腳本 JS 和/或 jquery ..

.content {display:flex; max-width:800px;min-width:300px;gap:20px;margin:auto;}
.main { flex: 70%;}.main2 {max-width:400px;} 
.side { flex: 30%;  padding:10px;}.img {    background:blue;}.banner {  background:red;}
.img, .banner { width:100%; min-width:50px; height:50px;display:grid;place-items:center;    color: #fff;    margin:10px auto;}

<h2>Rearrange content - Place each div (banner) under each image </h2>
<div class="content">
    <div class="main">
        <div class="img">Image 1</div>
        <div class="img">Image 2</div>
        <div class="img">Image 3</div>
        <div class="img">Image 4</div>
        <div class="img">Image 5</div>
        <div class="img">Image 6</div>
        <p> Multiple DIVs with images ...
        <br>    ...
    </div>
    <div class="side">
        <div class="banner">Banner1</div>
        <div class="banner">Banner2</div>
        <div class="banner">Banner3</div>
        <div class="banner">Banner4</div>
        <div class="banner">Banner5</div>
        <div class="banner">Banner6</div>
        <div class="banner">Banner7</div>
        <div class="banner">Banner8</div>
        <div class="banner">Banner9</div>
        <div class="banner">Banner10</div>
        </div>
    </div>
<hr>
    <h2> This is how it should look </h2>
    <div class="main2">
  <div class="img">Image 1</div>
        <div class="banner">Banner1</div>
        <div class="img">Image 2</div>
        <div class="banner">Banner2</div>
        <div class="img">Image 3</div>
        <div class="banner">Banner3</div>
        <div class="img">Image 4</div>
        <div class="banner">Banner4</div>
        <div class="img">Image 5</div>
        <div class="banner">Banner5</div>
        <div class="img">Image 6</div>
        <div class="banner">Banner6</div>
        <div class="banner">Banner7</div>
        <div class="banner">Banner8</div>
        <div class="banner">Banner9</div>
        <div class="banner">Banner10</div>
    </div>

uj5u.com熱心網友回復：

要執行您需要的操作，您可以遍歷元素并使用它們的索引通過它們的索引將它們放置在相關元素的.banner下方。像這樣的東西：.imginsertAfter()

let $imgs = $('.content .main .img');
$('.content .side .banner').each((i, el) => $(el).insertAfter($imgs[i]));

.content {
  display: flex;
  max-width: 800px;
  min-width: 300px;
  gap: 20px;
  margin: auto;
}

.main {
  flex: 70%;
}

.img,
.banner {
  width: 100%;
  min-width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  color: #fff;
  margin: 10px auto;
}

.img {
  background: blue;
}

.banner {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
  <div class="main">
    <div class="img">Image 1</div>
    <div class="img">Image 2</div>
    <div class="img">Image 3</div>
    <div class="img">Image 4</div>
    <div class="img">Image 5</div>
    <div class="img">Image 6</div>
  </div>
  <div class="side">
    <div class="banner">Banner1</div>
    <div class="banner">Banner2</div>
    <div class="banner">Banner3</div>
    <div class="banner">Banner4</div>
    <div class="banner">Banner5</div>
    <div class="banner">Banner6</div>
  </div>
</div>

uj5u.com熱心網友回復：

好吧，要回答我自己的問題，因為我不太了解 JS，所以這對我來說很難。

我設法制作了一些使橫幅隨機化的東西，并且我使用了 jquery。

jQuery("#btn").click(function() {
    var cards = jQuery(".side .banner");
    for(var i = 0; i < cards.length; i  ){
            var target = Math.floor(Math.random() * cards.length -1)   1;
            var target2 = Math.floor(Math.random() * cards.length -1)  1;
            cards.eq(target).before(cards.eq(target2));
    }
    cards = jQuery(".side .banner");
    var images = jQuery(".content.desk .img");
    if (cards.length < images.length) {
        for (var i=0; i<cards.length; i  ) {
            images.eq(i).after(cards.eq(i));
        }
    } else {
        for (var i=0; i<images.length; i  ) {
            images.eq(i).after(cards.eq(i))
        }
        for (var i=images.length; i<cards.length; i  ){
            cards.eq(i-1).after(cards.eq(i));
        }
    }
});

body {
    max-width:1250px;
    margin:auto;
}
h1, h2, h3, h4 {
    text-align:center;
}
.content {
    display:flex;
    max-width:800px;
    min-width:300px;
    gap:20px;
    margin:auto;
}
.main {
    flex: 70%;
}
.side {
    flex: 30%;
    background: lightblue;
    padding:10px;
}
.img {
    background:blue;
}
.banner {
    background:red;

}
.img, .banner {
    width:100%;
    min-width:50px;
    height:50px;
    display:grid;
    place-items: center;
    color: #fff;
    margin:10px auto;
}

<body>  
<h1>Rearrange content</h1>

<div class="content desk">
    <div class="main">
        <button id="btn">Click to reorder and randomize</button>
        <div class="img">Image 1</div>
        <div class="img">Image 2</div>
        <div class="img">Image 3</div>
        <div class="img">Image 4</div>
        <div class="img">Image 5</div>
        <div class="img">Image 6</div>
        <div class="img">Image 7</div>
        <div class="img">Image 8</div>
        <div class="img">Image 9</div>
        <div class="img">Image 10</div>
        <div class="img">Image 11</div>
        <div class="img">Image 12</div>
        <div class="img">Image 13</div>
    </div>
    
    <div class="side">
            <div class="banner">Banner1</div>
        <div class="banner">Banner2</div>
        <div class="banner">Banner3</div>
        <div class="banner">Banner4</div>
        <div class="banner">Banner5</div>
        <div class="banner">Banner6</div>
        <div class="banner">Banner7</div>
        <div class="banner">Banner8</div>
        <div class="banner">Banner9</div>
        <div class="banner">Banner10</div>
    
    </div>
    
</div>
    <script
              src="https://code.jquery.com/jquery-3.6.0.min.js"
              integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
              crossorigin="anonymous"></script>
    </body>

uj5u.com熱心網友回復：

編輯：

這是另一種更簡潔的方法！

(function () {
    const main = document.querySelectorAll('.main .img');
    const side = document.querySelectorAll('.side .banner');

    let offset;

    side.forEach((banner, idx) => {
        const img = main[idx] || offset;
        img.insertAdjacentElement('afterend', banner);
        offset = banner;
    });
}());

.content { display: flex }
.main, .side { flex-grow: 1 }
.content,
.main2 {
  font-family: sans-serif;
  line-height: 2;
  color: white;
}

.img { background-color: red; margin: 3px;}
.banner { background-color: blue; margin: 3px;}

<div class="body">
    <h2>Rearrange content - Place each div (banner) under each image </h2>
    <div class="content">
        <div class="main">
            <div class="img">Image 1</div>
            <div class="img">Image 2</div>
            <div class="img">Image 3</div>
            <div class="img">Image 4</div>
            <div class="img">Image 5</div>
            <div class="img">Image 6</div>
        </div>
        <div class="side">
            <div class="banner">Banner1</div>
            <div class="banner">Banner2</div>
            <div class="banner">Banner3</div>
            <div class="banner">Banner4</div>
            <div class="banner">Banner5</div>
            <div class="banner">Banner6</div>
            <div class="banner">Banner7</div>
            <div class="banner">Banner8</div>
            <div class="banner">Banner9</div>
            <div class="banner">Banner10</div>
        </div>
    </div>
</div>

原版的：

您需要遍歷元素，然后在回圈時合并/組合陣列。有多種方法可以做到這一點。這是reduce用于組合元素的一種方式（帶有注釋）。

如果您從 JS 開始，我建議您使用簡單的 for 回圈開始。

當您運行下面的代碼片段時，原始代碼片段將顯示為紅色。單擊該按鈕將合并元素、附加它們并以綠色顯示它們。

祝你好運！

// I've wrapped this in a function so I can call it.
function rearrange() {

    // First I'm going to query all the divs with 'img' class
    // From that, I'll call 'Array.from' to create an array.
    const images = Array.from(document.querySelectorAll('.img'));

    // Similar to above, but for all the 'banner' divs.
    const banners = Array.from(document.querySelectorAll('.banner'));

    // This is my loop. I'm using .reduce, but for/while/.forEach/etc
    // would all have worked.
    // I'm going to loop over the images and push image/banner into 
    // a new container
    const container = images.reduce(function (el, image) {

        // get the first "banner" div
        const banner = banners.shift();

        // append the image div, first
        el.appendChild(image);

        // if a banner exists, append that
        if (banner) {
            el.appendChild(banner);
        }

        // as this is a reducer, i return my accumulator of divs
        return el;
    }, document.createElement('div'));

    // As image/banner could differ in length, push any additional
    // banner divs to the container
    if (banners.length > 0) {
        banners.forEach(banner => container.appendChild(banner));
    }

    // Add the new class name
    container.classList.add('main2');

    // Finally, append to body
    document.querySelector('.body').appendChild(container);
}

// My event handler to run
document.querySelector('#rearrange').addEventListener('click', rearrange);

.content { display: flex }
.main, .side { flex-grow: 1 }
.content,
.main2 {
  font-family: sans-serif;
  line-height: 2;
  color: white;
}

.img { background-color: red; margin: 3px;}
.banner { background-color: blue; margin: 3px;}

<div class="body">
    <button id="rearrange">Click here to re-arrange</button>
    <h2>Rearrange content - Place each div (banner) under each image </h2>
    <div class="content">
        <div class="main">
            <div class="img">Image 1</div>
            <div class="img">Image 2</div>
            <div class="img">Image 3</div>
            <div class="img">Image 4</div>
            <div class="img">Image 5</div>
            <div class="img">Image 6</div>
        </div>
        <div class="side">
            <div class="banner">Banner1</div>
            <div class="banner">Banner2</div>
            <div class="banner">Banner3</div>
            <div class="banner">Banner4</div>
            <div class="banner">Banner5</div>
            <div class="banner">Banner6</div>
            <div class="banner">Banner7</div>
            <div class="banner">Banner8</div>
            <div class="banner">Banner9</div>
            <div class="banner">Banner10</div>
        </div>
    </div>
    <h2>Rearranged:</h2>
    <hr />
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/428737.html

標籤：javascript html jQuery

上一篇：變換/不透明度屬性是否呼叫瀏覽器傳送帶中的繪制步驟

下一篇：如何為串列的每個元素使用檔案選項，并使用jQuery將其值傳遞給控制器

重新排列div-將每個div放在每個影像下(javascript-jQuery)

編輯：

原版的：