jquery - 通过单击超链接移动 DIV 以与选定的 DIV 对齐

Question

这是 HTML：

<tbody>
    <tr>
        <td>
            <div class="tcd-body-main" style="margin-bottom:5px; padding:0; border:0; background-color:transparent;">
                <div>
                    <form action="/search/" method="get">
                        <input type="text" name="q" placeholder="Search The Chef’s Directory" class="tcd-top-search-field-2" value="Beef">
                        <input type="submit" value="Search" class="button-orange">
                    </form>
                </div>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div class="tcd-body-main">
                <h1>You searched for: <strong>Beef</strong></h1><p class="tcd-search-rows">26 profiles found</p>

                <div class="tcd-search-result" data-type="profile" data-id="c2d119d4ba36c35a3ea4caed8d3b01df55306e26">
                    <a href="/profile/c2d119d4ba36c35a3ea4caed8d3b01df55306e26/" class="tcd-search-result-link">
                        <div class="name">Two Run Farm</div>
                    </a>
                </div>

                <div class="tcd-search-result" data-type="profile" data-id="271da7f3354e2aeb253655c129b62e27de93c003">
                    <a href="/profile/271da7f3354e2aeb253655c129b62e27de93c003/" class="tcd-search-result-link">
                        <div class="name">The Royce</div></a>
                </div>

                <div class="tcd-search-result" data-type="profile" data-id="9800f757070278dfe6cf03552b4fd1ea3fa6a09c">
                    <a href="/profile/9800f757070278dfe6cf03552b4fd1ea3fa6a09c/" class="tcd-search-result-link">
                    <div class="name">EBLEX</div></a>
                </div>
            </div>
        </td>
    </tr>
</tbody>

图。1

图2

这是结果 div 的 HTML：

<div class="tcd-body-right media-portal" id="tcd-search-portal">
    <h1>
        <a href="/view/c2d119d4ba36c35a3ea4caed8d3b01df55306e26/">Two Run Farm</a>
    </h1>
    <h2>USA</h2>
    <h3>Farms</h3>
    <p>
        <a href="/view/c2d119d4ba36c35a3ea4caed8d3b01df55306e26/">Click here to go to the profile</a>
    </p>
</div>

当我单击一个超链接时，我希望图 1 中显示的 div 向下移动到所选链接，即图 2 中的最终结果。有没有简单的方法来实现这一点？我猜某种形式的jQuery？

Answer 1

<table>
    <tbody>
        <tr>
            <td style="width: 50%;">
                <div class="tcd-body-main" style="margin-bottom: 5px; padding: 0; border: 0; background-color: transparent;">
                    <div>
                        <form action="/search/" method="get">
                            <input type="text" name="q" placeholder="Search The Chef’s Directory" class="tcd-top-search-field-2" value="Beef">
                            <input type="submit" value="Search" class="button-orange">
                        </form>
                    </div>
                </div>
            </td>
            <td rowspan="2" style="vertical-align: top;" id="right_content">
                <div class="tcd-body-right media-portal" id="tcd-search-portal">
                    <h1>
                        <a href="/view/c2d119d4ba36c35a3ea4caed8d3b01df55306e26/">Two Run Farm</a>
                    </h1>
                    <h2>USA</h2>
                    <h3>Farms</h3>
                    <p>
                        <a href="/view/c2d119d4ba36c35a3ea4caed8d3b01df55306e26/">Click here to go to the profile</a>
                    </p>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div class="tcd-body-main">
                    <h1>You searched for: <strong>Beef</strong></h1>
                    <p class="tcd-search-rows">26 profiles found</p>

                    <div class="tcd-search-result" data-type="profile" data-id="c2d119d4ba36c35a3ea4caed8d3b01df55306e26">
                        <a href="#" class="tcd-search-result-link">
                            <div class="name">Two Run Farm</div>
                        </a>
                    </div>

                    <div class="tcd-search-result" data-type="profile" data-id="271da7f3354e2aeb253655c129b62e27de93c003">
                        <a href="#" class="tcd-search-result-link">
                            <div class="name">The Royce</div>
                        </a>
                    </div>

                    <div class="tcd-search-result" data-type="profile" data-id="9800f757070278dfe6cf03552b4fd1ea3fa6a09c">
                        <a href="#" class="tcd-search-result-link">
                            <div class="name">EBLEX</div>
                        </a>
                    </div>

                    <div class="tcd-search-result" data-type="profile" data-id="c2d119d4ba36c35a3ea4caed8d3b01df55306e26">
                        <a href="#" class="tcd-search-result-link">
                            <div class="name">Two Run Farm</div>
                        </a>
                    </div>

                    <div class="tcd-search-result" data-type="profile" data-id="271da7f3354e2aeb253655c129b62e27de93c003">
                        <a href="#" class="tcd-search-result-link">
                            <div class="name">The Royce</div>
                        </a>
                    </div>
                </div>
            </td>
        </tr>
    </tbody>
</table>
<script type="text/javascript">
    $("a.tcd-search-result-link").click(function () {
        $('#right_content').css({ 'vertical-align': 'bottom' });
    });
</script>

Answer 2

您应该尝试使用.position()或.offset()来自 jQuery 库。单击超链接 ( .click()) 后，您需要从顶部获取 PX 中的位置。从页面.offset()顶部或父元素顶部开始的 8 点.position()。然后，您可以根据您的 css 格式给出要向下移动的元素 amargin-top或 a topwith 。.css()

您可以在 jQuery API 中查找所有这些函数：http: //api.jquery.com/

Answer 3

我找到了解决方案：

$(document).ready(function(){
$(".tcd-search-result-link").click(function(){
    var id = $(this).parent().attr('data-id');

    var find = $("div").find("[data-id='" + id + "']");

    var position = find.position();

    //$( "#testingparagraph" ).text( "left: " + position.left + ", top: " + position.top);

    $('#tcd-search-portal').css('top', position.top);

});

这将获取属性数据 - data-id 并将媒体门户（右侧 div）与所选链接对齐，从而提高移动设备上的可用性。

感谢您的评论和回答