Упрощение навигации по DOM

Хотелось бы затронуть тему правильной организации DOM, best practices, так сказать. Возможно немного пространно сформулировал, но смысл станет ясен после примера.

Пример. Форма ввода свойств некоторой сущности. Конкретнее: редактирование данных пользователя.

С чем столкнулся на практике:

<form action="#">
    <input id="UserId" type="hidden" />
    <div>
        <label>Имя:<input id="UserName" type="text" /></label>
    </div>
    <div>
        <label>Описание:<input id="UserDescription" type="text" /></label>
    </div>
</form>

Запрос с помощью jQuery выглядит следующим образом:

function GetUser() {
    return {
        id: $("#UserId").val(),
        name: $("#UserName").val(),
        description: $("#UserDescription").val()
    };
}

И казалось бы, все отлично. Если бы не:

• а если у нас несколько элементов управления для ввода данных о пользователях - конфликт идентификаторов (идентификатор должен быть уникален в пределах страницы)?
• а если наша сущность называется OurEntityWithVeryVeryReallyVeryLongName и имеет множество полей, представляете себе кошмар в виде id="OurEntityWithVeryVeryReallyVeryLongNameFieldWithLongName1" и тому подобное?

Что предлагаю:

<form class="User" action="#">
    <input class="Id" type="hidden" />
    <div>
        <label>Имя:<input class="Name" type="text" /></label>
    </div>
    <div>
        <label>Описание:<input class="Description" type="text" /></label>
    </div>
</form>

Теперь и запрос с помощью jQuery выглядит иначе:

function GetUser() {
    var user = $(".User");
    return {
        id: $(".Id", user).val(),
        name: $(".Name", user).val(),
        description: $(".Description", user).val()
    };
}

Как по мне, вполне приемлемо, и даже похоже на объектную нотацию ("User.Name").

Возможно где-то в Сети уже есть подобное или лучшее решение, как делают Про я не искал (зря? тогда жду комментариев), сразу решил поделиться пришедшей мыслью. На этом все. Удачной разработки!

jQuery: позиционирование элементов

Простая задача - разместить абсолютно позиционированный (в стиле определено: position: absolute) div под элементом ввода (input).

var input = $("input");
var offset = input.offset();

var x = offset.left;
var y = offset.top + input.height();

$("div").offset({
    left: x,
    top: y
});

Вот казалось бы и все. И действительно - работает, но если не учитывать вертикальный скроллинг страницы. Если он больше нуля, то div будет выше элемента ввода ровно на значение вертикального скроллинга.

Окончательное решение далее.

var input = $("input");
var offset = input.offset();

var x = offset.left;
var y = offset.top + input.height() + $(window).scrollTop();

$("div").offset({
    left: x,
    top: y
});