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 FIG 1

图2 FIG 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

您应该尝试使用jQuery库中的.position()或.offset()。单击超链接（.click()）后，您需要从顶部获取PX中的位置。来自页面顶部.offset()或父元素.position()顶部的战士。然后，您可以根据您的css格式，为margin-top或top .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 - data-id并将媒体门户（右侧div）与所选链接对齐，从而提高移动设备的可用性。

感谢您的评论和回答

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

3 个答案: