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

这是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>

您搜索了：牛肉
找到了26个配置文件

图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？

您应该尝试使用jQuery库中的

.position（）

或

.offset（）

。单击超链接（

.click（）

）后，需要从顶部获取PX中的位置。距页面顶部

.offset（）

或父元素顶部

.position（）

的第十八个字符。然后，根据css格式，您可以为要向下移动的元素指定一个

边距顶部

或一个带有

.css（）

的

顶部

---

您可以在jQuery API中查找所有这些函数：

您应该尝试使用jQuery库中的

.position（）

或

.offset（）

。单击超链接（

.click（）

）后，需要从顶部获取PX中的位置。距页面顶部

.offset（）

或父元素顶部

.position（）

的第十八个字符。然后，根据css格式，您可以为要向下移动的元素指定一个

边距顶部

或一个带有

.css（）

的

顶部

您可以在jQuery API中查找所有这些函数：

美国
农场


您搜索了：牛肉
找到26个配置文件

$（“a.tcd-search-result-link”）。单击（函数（）{
$（'right_content'）.css（{'vertical align'：'bottom'}）；
});

美国
农场


您搜索了：牛肉
找到26个配置文件

$（“a.tcd-search-result-link”）。单击（函数（）{
$（'right_content'）.css（{'vertical align'：'bottom'}）；
});

我找到了一个解决方案：

$(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）与所选链接对齐，从而提高移动设备的可用性

感谢您的评论和回答

我找到了一个解决方案：

$(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）与所选链接对齐，从而提高移动设备的可用性

---

感谢您的评论和回答

您的jQuery代码在哪里？我目前没有jQuery代码，正在更新问题您的jQuery代码在哪里？我目前没有jQuery代码，正在更新问题