Создание списка делений по классам - PullRequest
Новая
       18

Создание списка делений по классам

0 голосов
/ 06 июля 2010

Я не уверен, должен ли я делать это с 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>

Я пытаюсь создать <ul>, сгенерированный идентификаторами любого div с классом "что-то".

Буду ли я лучше делать это, используя jquery? и как мне лучше всего создать список / меню этих элементов?

Ответы [ 3 ]

1 голос
/ 06 июля 2010

Вы бы использовали PHP, если это вариант (т.е. вы знаете идентификаторы, когда загружаете страницу и уже генерируете их из вашего PHP), в противном случае только люди с включенным JavaScript будут видеть содержимое вашей страницы (и искать двигатели, вероятно, накажут этот «скрытый» контент).

Если у вас есть список идентификаторов в массиве PHP, вы бы сделали что-то вроде этого: 

<?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 и поставить идентификаторы на теги 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>');
});
0 голосов
/ 06 июля 2010

Предполагая, что предоставленный вами HTML-файл визуализирован и у вас есть доступный элемент UL на странице, вы можете использовать JQuery для выполнения (что-то вроде) следующего 

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

Немного неясно, какие ограничения налагаются на вас, но я надеюсь, что это поможет.

0 голосов
/ 06 июля 2010

хорошо, чтобы "преобразовать" эту структуру в 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);

Это заменит div на ul.Важным моментом в этом примере является удаление оригинального div из-за идентификаторов, которые должны быть уникальными в действительном html markup.

...