Форум

drmedus · #1 (**permalink**) 11.03.2014, 11:27

Доброго времени. Задача предельно проста - разбить заранее неизвестное количество элементов по три штуки, т.е. есть такое

<img src="" />
<img src="" />
<img src="" />
<img src="" />
<img src="" />
<img src="" />
<img src="" />
<img src="" />
....

а нужно сделать из этого такое

<div>
<img src="" />
<img src="" />
<img src="" />
</div>
 
<div>
<img src="" />
<img src="" />
<img src="" />
</div>
 
<div>
<img src="" />
<img src="" />
<div>
....

помогите пожалуйста.

danik.js · #2 (**permalink**) 11.03.2014, 12:35

HTML код можно редактировать даже в блокноте. Какие-то проблемы?

рони · #3 (**permalink**) 11.03.2014, 12:51

drmedus,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
    <meta charset="utf-8" />
  <style type="text/css">
 div {
    border: 2px solid blue;
    margin: 2px;
    padding: 2px;
  }
 img{
   border: #FF0000 1px dotted;
   width: 50px;
   height: 50px;
 }

  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>

<body>
<img src="" />
<img src="" />
<img src="" />
<img src="" />
<img src="" />
<img src="" />
<img src="" />
<img src="" />
<script>
  while ($('body > img:lt(3)').size()) {
        $('body > img:lt(3)').wrapAll("<div></div>");
  }
</script>

</body>

</html>

Aetae · #4 (**permalink**) 11.03.2014, 13:22

олдскул)

<!DOCTYPE HTML>
 
<html>
 
<head>
  <title>Untitled</title>
    <meta charset="utf-8" />
  <style type="text/css">
 div {
    border: 2px solid blue;
    margin: 2px;
    padding: 2px;
  }
 img{
   border: #FF0000 1px dotted;
   width: 50px;
   height: 50px;
 }
 
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
 
<body>
<img src="" />
<img src="" />
<img src="" />
<img src="" />
<img src="" />
<img src="" />
<img src="" />
<img src="" />
<script>
var parent = document.body,
    imgs = [].slice.call(parent.getElementsByTagName('img'));

for(var i = 0, l = imgs.length, div; i < l; i++){
    if(i%3 === 0) div = parent.appendChild(document.createElement('div'));
    div.appendChild(imgs[i]);
}
</script>
 
</body>
 
</html>

рони · #5 (**permalink**) 11.03.2014, 13:39

Сообщение от Aetae

i < l

но работает

Aetae · #6 (**permalink**) 11.03.2014, 13:45

Сообщение от рони

но работает

Движок глючит. У меня в коде всё скучно.)

drmedus · #7 (**permalink**) 11.03.2014, 14:46

вроде то что нужно. спасибо ребята.

drmedus · #8 (**permalink**) 11.03.2014, 15:17

хотя нет. Div должен создаваться именно на месте трех картинок. а сейчас он у меня появляется после body.

drmedus · #9 (**permalink**) 11.03.2014, 15:34

я написал вот так

var parent = $('.jTscroller'),
                        imgs = $('.jTscroller a');

                    for(var i = 0, l = imgs.length, div; i < l; i++){
                        if(i%3 === 0) div = parent.appendChild(document.createElement('div'));
                        div.appendChild(imgs[i]);
                    }

и он ругается на строчку

if(i%3 === 0) div = parent.appendChild(document.createElement('div'));

Aetae · #10 (**permalink**) 11.03.2014, 21:54

drmedus, если вы используете jquery($) - используйте jquery.

У меня нет желания вам пояснять что такое jquery объект, и как он взаимодействует с нативным js. Предполагается, что используя jquery вы понимаете что это такое.

Форум

Справочник

Discord чат

Курсы javascript