javascript - 如何使用类名获取一个div的内容并使用类名将它们附加到另一个div

Question

我正在尝试修改从我的 wordpress 页面中的插件获取的数据的布局，我想按类名移动 div 的元素:IDX-columnThree(价格和地址数据)到以类名命名的第二个 div:IDX-columnTwo。

通常自从这里我们正在处理更多具有相同类名的结果我找不到自己做这件事的方法所以我寻求帮助。下面我上传了实际布局和我想要的布局的两个屏幕截图，以便您更好地了解我需要什么。

实际布局

我想要得到的结果

我试过这段代码:$(".IDX-columnThree").contents().appendTo('.IDX-columnTwo').end().fadeOut();

但我得到的结果是它从页面上显示的所有列表结果中获取内容 columnThree 并将它们移动到每个列表中的 columnTwo

更新 1: 我使用这段代码让它工作:

$(".IDX-columnTwo").append($(".IDX-columnThree").html());
$(".IDX-columnThree").fadeOut();

我无法添加代码，因为它来自外部，但我正在谈论的页面是这个:http://boltlaunch.idxbroker.com/idx/results/listings?idxID=a000&srt=newest

columnTwo 的结果 HTML 代码，现在在我放置上面的 jQuery 代码并从 columnTwo 和 columnThree 收集内容之后:

<div class="IDX-resultsCol IDX-columnTwo">
    <div class="IDX-propertySize">


                <div class="IDX-homeSize">
            <span>Home Size</span>
                                                    <div class="IDX-resultsField-sqFt">
                            <span class="IDX-resultsText">817</span>
                <span class="IDX-resultsLabel">Square Feet</span>                   </div>

        </div>

    </div>

                                            <div class="IDX-resultsField-bedrooms">
                            <span class="IDX-resultsText">1</span>
                <span class="IDX-resultsLabel">Bedrooms</span>                  </div>


        <div class="IDX-resultsBaths IDX-bathsFull">

                                        <div class="IDX-resultsField-totalBaths">
                    <span class="IDX-resultsText">1</span>
            <span class="IDX-resultsLabel">Total Baths</span>           </div>


                                        <div class="IDX-resultsField-fullBaths">
                    <span class="IDX-resultsText">1</span>
            <span class="IDX-resultsLabel">Full Baths</span>            </div>

    </div>

                                            <div class="IDX-resultsField-listingID">
                            <span class="IDX-resultsLabel">Listing #:</span>                <span class="IDX-resultsText">M1431392</span>
                    </div>



            <div class="IDX-resultsField-listingPrice IDX-resultsField-price"><span class="IDX-resultsLabel">
                    Listing Price:
                </span><span class="IDX-resultsText">
            $78,000


        </span></div>


    <div class="IDX-streetInfo"><a class="IDX-addressLink" href="http://boltlaunch.idxbroker.com/idx/details/listing/a000/M1431392/1455-N-TREASURE-DR"><span class="IDX-resultsAddressNumber">1455 </span><span class="IDX-resultsAddressDirection">N </span><span class="IDX-resultsAddressName">TREASURE DR</span><span class="IDX-resultsAddressUnitNumber">4M</span><span class="IDX-resultsEndAddressCommaOne">, </span></a></div>
    <div class="IDX-cczInfo"><a class="IDX-addressLink" href="http://boltlaunch.idxbroker.com/idx/details/listing/a000/M1431392/1455-N-TREASURE-DR"><span class="IDX-resultsAddressCity">North Bay Village</span><span class="IDX-resultsEndAddressCommaTwo">, </span><span class="IDX-resultsAddressState">FLORIDA </span><span class="IDX-resultsAddressStateAbrv">FL </span><span class="IDX-resultsAddressZip">33141</span></a></div>

    <div class="IDX-resultsMedia">
        <div class="IDX-resultsMediaVtOh">


        </div>
        <div class="IDX-resultsPropInfo">
            <a class="IDX-resultsScheduleShowing" href="/idx/scheduleshowing/a000/M1431392">Sched. Showing</a>
            <a class="IDX-resultsMoreInfo" href="/idx/moreinfo/a000/M1431392">More Info</a>
        </div>
    </div>
</div>

现在我有另一个问题，我想创建一个自定义 div 并将这些 Price、Beds、Baths、SquareFt 放在里面，这样我就可以使用 css 对它们进行连续排序。

Answer 1

我认为您的问题是如何“选择”一个 div 而不是多个 div。您可以使用一系列选择器而不是一个来更具体地选择一个 div。以下是您可以使用的所有选择器的完整说明:http://www.w3schools.com/cssref/css_selectors.asp .

一种快速作弊的方法是使用 chrome 开发人员工具。右键单击您的站点页面，选择“检查元素”。选择开发人员工具栏中的放大镜。选择要移动的 div。然后右键单击 html 元素并选择复制 css 路径。粘贴它而不是“.IDX-columnTwo”或“.IDX-columnThree”。

将来，示例代码或 jsfiddle 示例将真正帮助理解您的问题。