Question

我不确定我是否应该使用jquery或php进行此操作，但我有一个html页面，其中有几个同一类的div，但是有不同的ID。即：

<div class="something" id="furniture">contents</div>
<div class="something" id="lighting">contents</div>
<div class="something" id="homewares">contents</div>

我正在做的是创建一个由任何div的id生成的<ul>和类“something”。

使用jquery我最好这样做吗？以及如何最好地创建这些div的列表/菜单？

Answer 1

如果这是一个选项，你会使用PHP（即你在加载页面时知道id并且已经从PHP生成它们），否则只有启用了JavaScript的人才会看到你的页面内容（和搜索）引擎可能会惩罚这个“隐藏”内容。）

如果你在PHP数组中有id列表，你可以这样做：

<?php 
    $ids = array('furniture, 'lighting', 'homewares');
?>
<ul>
  <?php foreach ($ids as $id) : ?>
  <li><?=$id?></li>
  <?php endforeach; ?>
</ul>

如果你想使用jQuery，你可以这样做：

$('body').append('<ul id="yourID"></ul>');

$('div.something').each(function() {
    $('ul#yourID').append('<li>' + $(this).id + '</li>');
});

更新（您想要替换div代码并将ID放在li代码上）

$('body').append('<ul id="yourID"></ul>');

$('div.something').each(function() {
    var $id = $(this).id;
    $(this).remove();
    $('ul#yourID').append('<li id="' + $id  + '">' + $id  + '</li>');
});

Answer 2

好吧，要将该结构“转换”为ul，代码应如下所示：

 var $target = $('.something'),
     $parent = $target.parent(),
     $list   = $('<ul/>', {
       id:     'your_id_here',
       css:    {
           backgroundColor:  'red'
           // more css attributes, or use class: to assign a css class
     }
 });

 $target.each(function(){
     $list.append('<li>' + $(this)[0].id + '</li>');
 });   

 $target.remove();
 $parent.append($list);

那将用ul替换div。此示例中的重要事项是删除原始div因为ID，在有效的html markup中必须是唯一的。

Answer 3

假设您提供的HTML已呈现，并且页面上有可用的UL元素，您可以使用JQuery（如下所示）

jQuery('.something').each( 
function(index, Element) { 
    var newListElement = jQuery(document.createElement('li'));
    newListElement.html(Element.html());
    jQuery('#myul').append(newListElement);  
});

对你施加的限制有点不清楚，但我希望这会有所帮助。

按类创建div列表

3 个答案: