CODEWITHSUNDEEP
javascriptjqueryhtmlcss
albpower
albpower

Reputation: 119

How to get content of a div using classname and append them to another div using classname

I am trying to modify the layout of the data I get from a plugin in my wordpress page and I want to move elements of an div by class name: IDX-columnThree (The price & Address data) to the second div named with class name: IDX-columnTwo.

Normally since here we're working with more results with same class name I can't find a way to do this by myself so I am asking for help. Below I uploaded two screenshots of the actual layout and the layout I want to get so you get a better picture of what I need.

Actual Layout Actual layout

The new layout I want to get Result I want to get

I tried this code: $(".IDX-columnThree").contents().appendTo('.IDX-columnTwo').end().fadeOut();

But the result I get is it gets the content from all listings results shown on the page under columnThree and moves them to every single listing into columnTwo

UPDATE 1: I got this to work using this code:

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

I was unable to add a code since its coming from outside but the page for which I'm talking about is this one: http://boltlaunch.idxbroker.com/idx/results/listings?idxID=a000&srt=newest

The resulting HTML code for columnTwo, now after I placed the above jQuery code and collected the contents from columnTwo and 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>

Now I have another problem I want to create an custom div and to place those Price,Beds,Baths,SquareFt inside so I can order them in a row using css.

Upvotes: 0

Views: 267

Answers (1)

Andrew Carter
Andrew Carter

Reputation: 109

I think what your asking is how to 'select' just one div instead of multiples. You can more specifically select a div using a series of selectors instead of one. Here is a full explanation of all selectors you can use: http://www.w3schools.com/cssref/css_selectors.asp.

One quick way to sort of cheat is to used chrome developer tools. Right click on your site page, select 'inspect element'. Select the magnifying glass in the developer tool bar. Select the div you would like to move. Then right click on the html element and select copy css path. Paste that instead of '.IDX-columnTwo' or '.IDX-columnThree'.

In the future, example code or a jsfiddle example will really help understand your question.

Upvotes: 1

Related Questions