2013-03-22 5 views
2

Я относительно новичок во всей работе Javascript, за исключением некоторых основных вещей jQuery.mootools получает позицию элемента, который не имеет идентификатора

Недавно я взял на себя небольшой локальный проект, который использует mootools, и я застрял.

У меня есть несколько страниц с относительной простой структурой и содержимым, которые хранятся в базе данных. Первым элементом на каждой странице является либо div, либо абзац с фиксированной шириной и высотой.

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

<div class="header1"><img ...></div> 
<p class="header2"><img ...></p> 
<p class="header3"><img ...></p> 

Каждые из них следует несколько абзацев, содержащих текст или изображения ,

Моя проблема: я должен поместить маленький div с пиктограммой печати между первым элементом страницы (div или p) и следующим контентом, но мне не разрешено изменять какой-либо код, создающий эту страницу.

Идея заключается в использовании mootools (который загружен в любом случае), чтобы поместить div в абсолютное положение чуть ниже первого элемента.

Это может быть сделано довольно легко с помощью jQuery, но я должен использовать mootools, а элементы не имеют идентификаторов.

Есть ли какой-либо простой способ получить позицию либо, либо на загрузку страницы, а затем разместить (позиция: absolute;) под ним?

До сих пор у меня есть это, (что довольно плохо), который регистрирует в elemnent с классом "HEADER1"

window.addEvent('domready', function() { 
$$('.header1').each(function(element){ 
    console.log(element); 
}); 

});

+0

Почему НИЖЕ первый элемент? вводить его во 2-й элемент и смещать через CSS и отрицательный «margin-top», намного проще и эффективнее. Кроме того, будет работать с изменением размера без необходимости сбора/изменения абсолютных значений. –

ответ

1

element.getPosition() получает элементы x и y элемента, что должно позволить вам создать новый элемент, расположенный где-то там. getPosition() может быть в MooTools More, в зависимости от версии, которую вы используете.

Добавление нового элемента в DOM в подходящем месте без сложного позиционирования может быть проще, хотя это будет зависеть от вашего DOM.


Судя ваши реакции от комментариев, если вы просто хотели, чтобы соответствовать один элемент в документе что-то еще, чем идентификатором, document.getElement() является то, что вам нужно, что будет делать то же самое, как $$(), но вернуть первый матч или null, если ничего не найдено.

+0

Спасибо за ответ. Добавление нового элемента было бы намного проще, но мне не разрешено изменять код. И это также означает, что мне пришлось бы изменить около 3000 записей в базе данных. –

+0

вы можете добавлять элементы с помощью mootools и не изменять исходную базу кода. –

+0

... который вам нужно будет делать и при добавлении значка принтера, но * где * вы добавляете его в документ. Если вы добавите его в качестве первого дочернего элемента заголовка, вам может не понадобиться логика логического позиционирования. – akaIDIOT

0

Да, конечно. Вопрос в том, как получить нужный элемент, если он не имеет идентификатора. Это так же сложно, как в jQuery или так же просто, как в jQuery.

Взгляните на документацию mootools от Element.getPosition().

+0

В jQuery я могу сделать это: '$ («.header1»). position(); ' Какой AFAIK не имеет эквивалента в mootools, который теоретически доставляет массив при этом: ' $$ ('. header1'). each (function (element) ' –

+2

'document.getElement ('. header1'). getPosition()' хотел бы, подобно jQuery, получить позицию первого совпадающего элемента. '.each' - это что-то другое. – akaIDIOT

Смежные вопросы