Question

我有一个div使用位置ID，如：

<div id="Weymouth">
    <ul style="padding: 4px 6px;">
        <li>
            <div style="float:left;padding: 0 0 0 0; text-align: left; font-size: 14px; font-weight: bold;">May 21st</div>
            <div style="float:right;padding: 0 0 0 0; text-align: right;">5PM - 7:30PM</div>
            <div style="clear: both"></div>
            <div style="float:left;padding: 0 0 0 0; text-align: left;">Weymouth Liquor Store</div>
            <div style="float:right;padding: 0 0 0 0; text-align: right;"><a href="https://www.google.com/maps/dir/Andover,+MA//@42.6495835,-71.166032,12z/data=!4m8!4m7!1m5!1m1!1s0x89e308597f9a4cf5:0x28f59c5c00d57256!2m2!1d-71.1367953!2d42.6583356!1m0" class="amstel" target="_blank">Directions</a></div>
            <div style="clear: both"></div>
        </li>
    </ul>
</div>
<div id="Marshfield">
    <ul style="padding: 4px 6px;">
        <li>
            <div style="float:left;padding: 0 0 0 0; text-align: left; font-size: 14px; font-weight: bold;">May 10th</div>
            <div style="float:right;padding: 0 0 0 0; text-align: right;">6PM - 8PM</div>
            <div style="clear: both"></div>
            <div style="float:left;padding: 0 0 0 0; text-align: left;">Marshfield Liquor Store</div>
            <div style="float:right;padding: 0 0 0 0; text-align: right;"><a href="" class="amstel">Directions</a></div>
            <div style="clear: both"></div>
        </li>
    </ul>
</div>

我将有20个这样的位置。我想在网页的另一部分显示它们：我通过调用这20个地点中的每一个来工作：

var weymouth = document.getElementById('Weymouth').innerHTML;
var marshfield = document.getElementById('Marshfield').innerHTML;  (do this for all 20 locations)

然后在ul li中调用它以稍微不同的方式显示它：

<ul>
    <li class="alt">
        <div style="padding: 0 0 0 0; text-align: left;">
            <script language="javascript" type="text/javascript">document.write(marshfield);</script>
        </div>
        <div style="clear: both"></div>
    </li>
    <li class="alt">
        <div style="padding: 0 0 0 0; text-align: left;">
            <script language="javascript" type="text/javascript">document.write(weymouth);</script>
        </div>
        <div style="clear: both"></div>
    </li>
</ul>

使用相同的id（我想重命名为Location）并将_1到_20附加到每个位置...如何将它放在一个循环和显示中，而不必将20个变量和20个li连接到显示？

使用仍然无效的更新代码附加到此帖子。任何帮助将不胜感激：这是我的javascript：

   <script type="text/javascript">
        var target = document.querySelector('#target'), // get a reference to empty UL, target
        divs = ['Andover', 'Westford', 'Burlington', 'Boston', 'Weymouth', 'Marshfield'];
        //add ids of the divs that you want to copy to this array

        divs.forEach(function (v) { //iterate over ids array, and repeat below process for each id
            var el = document.querySelector('#' + v).cloneNode(true); //copy the div with "v" id
            var li = document.createElement('li') //create a new list item in memory
            li.className = 'alt'; //set css class name of new list item
            li.appendChild(el); // add the copied div to list item
            target.appendChild(li); //finally add the new list item to your target.
        });
    </script>

And here is my HTML:

        <div class="locations">
        <div class="headline">Burger Truck Locations</div>
             <ul id="target"></ul>
        </div>

 It is not displaying anything.  Need help.

Answer 1

如果您只想将某些<div>复制到<ul>，则可以执行以下操作

<!-- create an empty <ul> in HTML to copy your div's into -->
<ul id="target"></ul>

并在<ul>和<div>之后运行此脚本

var target = document.querySelector('#target'), // get a reference to empty UL, target
divs = ['Weymouth', 'Marshfield'];
//add ids of the divs that you want to copy to this array

divs.forEach(function (v) { //iterate over ids array, and repeat below process for each id
   var el = document.querySelector('#' + v).cloneNode(true); //copy the div with "v" id
   var li = document.createElement('li') //create a new list item in memory
   li.className = 'alt'; //set css class name of new list item
   li.appendChild(el); // add the copied div to list item
   target.appendChild(li); //finally add the new list item to your target.
});

作为旁注，您应该使用CSS类而不是内联样式，并避免使用document.write

循环通过div ids显示在其他地方

1 个答案: