我正在尝试修改我在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连续订购它们。
答案 0 :(得分:1)
我认为你的问题是如何'选择'只有一个div而不是倍数。您可以使用一系列选择器而不是一个选择器来更具体地选择div。以下是您可以使用的所有选择器的完整说明:http://www.w3schools.com/cssref/css_selectors.asp。
一种快速解决方法是使用chrome开发工具。右键单击您的站点页面,选择“inspect element”。在开发人员工具栏中选择放大镜。选择要移动的div。然后右键单击html元素并选择copy css path。粘贴而不是'.IDX-columnTwo'或'.IDX-columnThree'。
将来,示例代码或jsfiddle示例将真正有助于理解您的问题。