Question

我正在尝试修改我在wordpress页面中从插件中获取的数据的布局，并且我想按类名移动div的元素： IDX-columnThree （价格＆amp;地址数据）到以类名命名的第二个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。以下是您可以使用的所有选择器的完整说明：http://www.w3schools.com/cssref/css_selectors.asp。

一种快速解决方法是使用chrome开发工具。右键单击您的站点页面，选择“inspect element”。在开发人员工具栏中选择放大镜。选择要移动的div。然后右键单击html元素并选择copy css path。粘贴而不是'.IDX-columnTwo'或'.IDX-columnThree'。

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

如何使用classname获取div的内容，并使用classname

1 个答案: