jQuery, как сместить позицию между 2 или более элементами через текущую позицию

Question

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

изначально пробовал что-то вроде

    var parWidth = $theElement.parent().width;
    var parLeft = $theElement.parent().position().left;
    var moveToLeft = Math.round((parWidth - $theElement.width) - parLeft);

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

EDIT HTML:

<div class="button_select_header_like_thing">
    <div class="button_select">
        <ul class="button_select_toggle" id="button_groupings">
            <li>
                <div class="button_select_text">Menu Text</div><div class="button_select_arrow">V</div>
                <div style="clear:both"></div>
            </li>
            <li>
                <ul class="button_select_sub" rel="hidden">
                    <li>Text</li>
                    <li>Text</li>
                    <li>Text</li>
                    <li>Text</li>
                </ul>       
            </li>
        </ul>
    </div>
</div>

Answer 1

При создании раскрывающихся меню всегда целесообразнее указывать дочерние элементы ul как прямые дочерние элементы родительского элемента li, например:

<ul>
    <li>Parent 1</li>
    <li>Parent 2
        <ul>
            <li>Child 1</li>
            <li>Child 2</li>
        </ul>
    </li>
</ul>

Это помогает вам манипулировать дочерними элементами (скрываться, показываться, укладываться и т. д.) намного проще.В этом свете посмотрите этот jsfiddle , который я построил на вашем исходном коде, где дети точно совпадают с родителями, просто назначив им ширину 100%, эффективно ударяя края, заданныеродители.

Вот код для всех, кто боится jsfiddle (сначала HTML):

<div class="button_select_header_like_thing">
    <div class="button_select">
        <ul class="button_select_toggle" id="button_groupings">
            <li class="li_parent">
                <div class="button_select_text">Menu Text</div>
                <div class="button_select_arrow">V</div>
                <div style="clear:both"></div>
                <ul class="button_select_sub" rel="hidden">
                    <li>Text</li>
                    <li>Text</li>
                    <li>Text</li>
                    <li>Text</li>
                </ul>
            </li>
        </ul>
    </div>
</div>

... а затем CSS:

.li_parent
{
    width: 200px;
}

.button_select_text
{
    float: left;
    width: 150px;
    background-color: GREEN;
}

.button_select_arrow
{
    float: left;
    width: 50px;
    background-color: GREEN;
}

.li_parent ul
{
    width: 100%;
    background-color: ORANGE;
}

Надеюсь, это поможетили даже просто дает вам о чем подумать!:)

Answer 2

Измените свой JS-код на:

var parWidth = $theElement.parent().width(); // width is a function, not a property
var parLeft = $theElement.parent().position().left;
var moveToLeft = Math.round((parWidth - $theElement.width()) - parLeft);