Форум

Viral · #1 (**permalink**) 07.12.2011, 15:19

Здравствуйте. Простите заранее, если то что я щас напишу покажется Вам извращением. Другого пути реализации я не придумал, а навигация по DOM с такой разметкой - бессмысленна и беспощадна.

Разметка:

<div class="q1">
    <div class="w1"></div>
    <div class="w1"></div>
    <div class="w1"></div>
    <div class="w1"></div>
</div>
<div class="q2">
    <div class="w2">
        <div class="e1">
            <div class="r1"></div>
            <div class="r1"></div>
            <div class="r1"></div>
            <div class="r1"></div>
        </div>
        <div class="e2">
            <div class="r2"></div>
            <div class="r2"></div>
            <div class="r2"></div>
            <div class="r2"></div>
        </div>
    </div>
    <div class="w2">
        <div class="e1">
            <div class="r1"></div>
            <div class="r1"></div>
            <div class="r1"></div>
            <div class="r1"></div>
        </div>
        <div class="e2">
            <div class="r2"></div>
            <div class="r2"></div>
            <div class="r2"></div>
            <div class="r2"></div>
        </div>
    </div>
    <div class="w2">
        <div class="e1">
            <div class="r1"></div>
            <div class="r1"></div>
            <div class="r1"></div>
            <div class="r1"></div>
        </div>
        <div class="e2">
            <div class="r2"></div>
            <div class="r2"></div>
            <div class="r2"></div>
            <div class="r2"></div>
        </div>
    </div>
    <div class="w2">
        <div class="e1">
            <div class="r1"></div>
            <div class="r1"></div>
            <div class="r1"></div>
            <div class="r1"></div>
        </div>
        <div class="e2">
            <div class="r2"></div>
            <div class="r2"></div>
            <div class="r2"></div>
            <div class="r2"></div>
        </div>
    </div>
</div>

Скрипт:

$(document).ready(function(){
    var q1 = (".q1 > w1");
    var q2 = (".q2 > w2");
    var e1 = (".e1 > r1");
    var e2 = (".e2 > r2");
    q2.hide();
    e2.hide();
    q1.click(function(){
        var a = q1.index(this);
        q2.eq(a).show().siblings().hide();
        // здесь по идее должен быть ответ на вопрос, но ни .eq(0) ни .filter(":first") мне не помогли.
    });
});

Уважаемые знатоки, внимание, вопрос:
Каким образом мне вытащить первый элемент массива e2, который в свою очередь вытаскивается из массива q2, если ни eq() ни filter() не помогли?

devote · #2 (**permalink**) 07.12.2011, 15:47

<div class="e2">
    <div>this is first child</div>
    <div>this is last child</div>
</div>
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
  alert( $(".e2 div:first-child").html() );
</script>

ksa · #3 (**permalink**) 07.12.2011, 16:02

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

Каким образом мне вытащить первый элемент массива e2, который в свою очередь вытаскивается из массива q2

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

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
function Go() {
	$('.q2 .e2 > div:first').css('color','red');
};
</script>
</head>
<body>
<div class="q1">
    <div class="w1"></div>
    <div class="w1"></div>
    <div class="w1"></div>
    <div class="w1"></div>
</div>
<div class="q2">
    <div class="w2">
        <div class="e1">
            <div class="r1">1</div>
            <div class="r1">2</div>
            <div class="r1">3</div>
            <div class="r1">4</div>
        </div>
        <div class="e2">
            <div class="r2">Test</div>
            <div class="r2">1</div>
            <div class="r2">2</div>
            <div class="r2">3</div>
        </div>
    </div>
    <div class="w2">
        <div class="e1">
            <div class="r1"></div>
            <div class="r1"></div>
            <div class="r1"></div>
            <div class="r1"></div>
        </div>
        <div class="e2">
            <div class="r2"></div>
            <div class="r2"></div>
            <div class="r2"></div>
            <div class="r2"></div>
        </div>
    </div>
    <div class="w2">
        <div class="e1">
            <div class="r1"></div>
            <div class="r1"></div>
            <div class="r1"></div>
            <div class="r1"></div>
        </div>
        <div class="e2">
            <div class="r2"></div>
            <div class="r2"></div>
            <div class="r2"></div>
            <div class="r2"></div>
        </div>
    </div>
    <div class="w2">
        <div class="e1">
            <div class="r1"></div>
            <div class="r1"></div>
            <div class="r1"></div>
            <div class="r1"></div>
        </div>
        <div class="e2">
            <div class="r2"></div>
            <div class="r2"></div>
            <div class="r2"></div>
            <div class="r2"></div>
        </div>
    </div>
</div>
<input type='button' value='Go' onclick='Go()' />
</body>
</html>

Viral · #4 (**permalink**) 07.12.2011, 16:04

ksa, ну ты то хоть не издевайся)
естественно должна быть возможность производить действие над любым из элементов массива... а их там и 50 может быть... эта разметка исключительно как пример.

Подскажи, пожалуйста, статейку, где описаны способы работы с многомерными массивами посредством jQuery.

devote · #5 (**permalink**) 07.12.2011, 16:07

ksa,

div:first

лучше не юзать псевдокласс first это не стандартный псевдокласс и jQuery запускает свой собственный поиск элементов, что затормаживает работу скрипта. Поэтому лучше юзать стандартный first-child он поддерживается querySelector и тем самым ускоряет процесс поиска.

ksa · #6 (**permalink**) 07.12.2011, 16:11

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

лучше юзать стандартный first-child

Эва!

Учту на будущее...

Я что прочитал...
http://jquery-docs.ru/Selectors/
То и использую...

Viral · #7 (**permalink**) 07.12.2011, 16:15

Я когда сюда постил не подумал о существовании многомерных массивов.
Извините за флуд и уг. Все нашел, во всем разобрался. Спасибо.

ksa · #8 (**permalink**) 07.12.2011, 16:16

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

должна быть возможность производить действие над любым из элементов массива

Так я х/з чего там тебе нужно "производить"...

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

Подскажи, пожалуйста, статейку

так вот он, весь инструментарий...
http://jquery-docs.ru/Selectors/
и оригинал
http://api.jquery.com/category/selectors/

devote · #9 (**permalink**) 07.12.2011, 16:17

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

Эва!

Учту на будущее...

Я что прочитал...
http://jquery-docs.ru/Selectors/
То и использую...

Я было дело изучал jQuery изнутри. Дело в том что jQuery испульзкет движок селекторов Sizzle, который является второстепенным, если стандартный встроенный в браузер querySelectorAll не выдает результатов, то jQuery запускает этот самый Sizzle, по спецификации querySelectorAll не поддерживает обычный first и многие другие псевдоклассы что юзает jQuery поэтому при попытки отдать querySelectorAll подобный запрос приводит к пустому результату, так как селектор ошибочен, что в свою очередь заставляет jQuery запускать внутренний поиск.

ksa · #10 (**permalink**) 07.12.2011, 16:18

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

Я было дело изучал jQuery изнутри.

Да я верю, верю...

Форум

Справочник

Discord чат

Курсы javascript