Creating list of divs by class

Question

I'm not sure whether I should be doing this with jquery or php, but I have a html page with several divs of the same class, but different ids. ie:

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

What I'm looking at doing is creating a <ul> generated by the ids of any div with the class "something".

Would I be best doing this using jquery? and how would I best go about creating a list/menu of these divs?

TIA.

Answer 1

You would use PHP if that is an option (i.e. you know the ids when you load the page and are generating them from your PHP already), otherwise only the people with JavaScript enabled are going to see your page content (and search engines would probably punish this "hidden" content).

If you have the list of ids in a PHP array you would do something like this:

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

If you wanted to use jQuery you could do this:

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

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

Update (you want to replace the div tags and put the ids on the li tags)

$('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

well, to "convert" that structure into ul's, code should look like:

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

That would replace the divs with ul's. Importan thing in this example is to remove the original div because of the ids, which have to be unique in a valid html markup.

Answer 3

Assuming the HTML you've provided is rendered, and that you have an available UL element on the page, you can use JQuery to do (something like) the following

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

It's a bit unclear as to the restrictions that are imposed upon you, but I hope this helps.