Как связать не требуется никаких элементов в один div?

0

Im новый для этого Jquery Stuff..

Я создал много элементов div.

например:

<div id="inner">...</div>
<div id="inner">...</div>
<div id="inner">...</div>
.
.
.
.
.
<div id="inner">...</div>

так что мне нужно, может потребоваться, чтобы ни один из элементов div мог быть привязан или включен в другой элемент div? Например, мне нужно 3 div#inner элемента в одном элементе div#outer и другом 3 в другом.

<div id="outer">
  <div id="inner">...</div>
  <div id="inner">...</div>
  <div id="inner">...</div>
</div>

<div id="outer">
  <div id="inner">...</div>
  <div id="inner">...</div>
  <div id="inner">...</div>
</div>

Итак, любой способ сделать это с помощью JQuery?

  • 1
    Не присваивайте один и тот же идентификатор более чем одному тегу. Идентификатор уникален на странице.
  • 0
    Как сказал @pc-shooter pc-shooter, не повторяйте, пожалуйста, попробуйте сами, прежде чем спрашивать!
Теги:

5 ответов

0
Лучший ответ

Как можно видеть здесь:

http://jsfiddle.net/sY7pK/

var innerDivHtml = '<div class="inner"></div>';
$('div.outer').each(function(index, element){
    var i = 3;
    while(i--)
        $(element).append(innerDivHtml);
});

вы можете просто добавить html в виде простой строки к элементу.

jQuery внутренне преобразует его в HTMLElements.

Примечание. Не используйте id несколько раз. Используйте class. Если вы используете id, будет выбран только первый. id должен использоваться на уникальных элементах, когда вы хотите получить быстрый доступ к ним.

Обновление для jsFiddle:

http://jsfiddle.net/vNq9M/3/

$(".inner").each(function(index){
    var me = $(this);
   if(index % 3 === 0)
      $('body').append('<div class="outer"></div>');
   $(".outer:last").append(me.clone());
   me.remove();
})

Изменение с id на class

Поделиться
  • 0
    Мне нужно, чтобы внутренний был связан с внешним ... но не внутренний должен быть добавлен к внешнему jsfiddle.net/vNq9M
  • 0
    Я обновил ваш jsFiddle.
Показать ещё 2 комментария
2 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Sortable - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
.outer{
    display:block;
    background:#3a3a3a;
    width:100%;
    height:auto;
    padding:15px;
    color:#fff;
    overflow:hidden;
}

.inner{
    display:block;
    width:100%;
    background:#3a3;
    padding:3px;
    color:#fff;
    overflow:hidden;
    margin-bottom:5px;
}
  </style>
  <script>
  $(function() {

$(".inner").each(function(index){
   if(index%3 == 0 || index == 0){
      $("#body").append("<div class='outer'></div>")
   }
   var lastOuter = $(".outer:last");
   lastOuter.append($(this).clone());
   $(this).remove();
})


});
  </script>
</head>
<body>
<div class="inner">Inner</div>
<div class="inner">Inner</div>
<div class="inner">Inner</div>
<div class="inner">Inner</div>
<div class="inner">Inner</div>
<div class="inner">Inner</div>
<div class="inner">Inner</div>
<div class="inner">Inner</div>
<div class="inner">Inner</div>
<div id="body"></div>
</body>
</html>
Поделиться
  • 0
    спасибо, но не беспокоиться? Я делаю что-то неправильно? jsfiddle.net/vNq9M
  • 0
    посмотри на мой ответ
Показать ещё 3 комментария
0

Вы можете просто сделать:

$("div#outer").append("<div id='inner'>INNER</div>")

Рабочая скрипка.

Если вам нужно создать несколько внутренних div, вы можете использовать цикл for:

$(document).ready(function(){
    for (var i = 0; i < 3; i++) {
        $("div#outer").append("<div class='innerclass'>INNERCLASS</div>");
    }
});

Рабочая скрипка.

Поделиться
0

Да, возможно, вы можете использовать. клон и.appendTo

$( ".inner" ).clone().appendTo( "#outer" );
Поделиться
0

использовать клон в jquery

<div id="outer">
  <div class="inner">...</div>
  <div class="inner">...</div>
  <div class="inner">...</div>
</div>
Поделиться
  • 0
    я не нужен клонировать того же элемент , но у меня есть различные элементы в различном div секции , поэтому мне нужно только , чтобы связать его в другой DIV

Ещё вопросы

Сообщество Overcoder
Наверх
Меню