Javascript-форум - разделить на колонки элементы

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - разделить на колонки элементы (https://javascript.ru/forum/jquery/53480-razdelit-na-kolonki-ehlementy.html)

разделить на колонки элементы

есть много таблиц, генерируются динамически, нужно разделить на две колонки, пробую обернуть в div, но не получается.

<script>
$('table:eq(2)').append('</div><div class="2">');
</script>

<table>
<tr>
<td></td><td></td>
</tr>
</table>

<table>
<tr>
<td></td><td></td>
</tr>
</table>
<table>
<tr>
<td></td><td></td>
</tr>
</table>

<table>
<tr>
<td></td><td></td>
</tr>
</table>

Цитата:

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

пробую обернуть в div, но не получается.

<script>
$('table:eq(2)').append('</div><div class="2">');
</script>

Это не "оборачивание"... :no: Метод append() выполняет совсем другие действия

Цитата:

Добавляет контент внутрь каждого элемента набора. Добавляемый контент следует за уже существующим.
Данный метод подобен применению appendChild.

http://jquery-docs.ru/Manipulation/append/

Цитата:

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

table:eq(2)

Этот селектор вообще выбирает только одиночный элемент... ;)

Цитата:

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

есть много таблиц, генерируются динамически, нужно разделить на две колонки

Как вариант...

<!DOCTYPE html>
<html ng-app>
<head>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="http://code.angularjs.org/1.1.4/angular.min.js"></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
.right {
	float: right;
}
</style>
<script type='text/javascript'>
$(function(){
	$('table:even').wrap('<div class="right"></div>');
});
</script>
</head>
<body> 
<table border='1'>
<tr>
<td>0</td><td>0</td>
</tr>
</table>

<table border='1'>
<tr>
<td>1</td><td>1</td>
</tr>
</table>

<table border='1'>
<tr>
<td>2</td><td>2</td>
</tr>
</table>

<table border='1'>
<tr>
<td>3</td><td>3</td>
</tr>
</table>
</body>
</html>

спасибо большое, интересный вариант. а на javascript (без подключения библиотек) есть какое-то решение ?

Цитата:

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

а на javascript (без подключения библиотек) есть какое-то решение ?

Может как-то так,

<html>
<head>
<style>
.right {
    float: right;
}
</style>
</head>

<body>
<table border='1'>
<tr>
<td>0</td><td>0</td>
</tr>
</table>
 
<table border='1'>
<tr>
<td>1</td><td>1</td>
</tr>
</table>
 
<table border='1'>
<tr>
<td>2</td><td>2</td>
</tr>
</table>
 
<table border='1'>
<tr>
<td>3</td><td>3</td>
</tr>
</table>

<script>

c=0
;[].forEach.call(document.querySelectorAll("table"), function(el){if(c++%2==0) el.className="right"})


</script>

</body>
</html>

Цитата:

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

Может как-то так,

Что же ты, используя document.querySelectorAll(), не взял "мой" селектор? :D

Цитата:

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

а на javascript (без подключения библиотек) есть какое-то решение ?

Разумеется! :yes:

Вот вариант вообще без скриптов. :)

<!DOCTYPE html>
<html ng-app>
<head>
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="http://code.angularjs.org/1.1.4/angular.min.js"></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
table:nth-child(odd) {
	float: right;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body> 
<table border='1'>
<tr>
<td>0</td><td>0</td>
</tr>
</table>

<table border='1'>
<tr>
<td>1</td><td>1</td>
</tr>
</table>

<table border='1'>
<tr>
<td>2</td><td>2</td>
</tr>
</table>

<table border='1'>
<tr>
<td>3</td><td>3</td>
</tr>
</table>
</body>
</html>

Правда и оборачивания ДИВами тут нет...