CODEWITHSUNDEEP
javascriptjquery
Keith Power
Keith Power

Reputation: 14141

jQuery append current div

I have an outter div .listingContainer, I have about 10 of these on the page all with different content in them. When I click the inner div .saveCompare I want to get the html off all the .listingContainer using jQuery var htmlStr = $(this).html();

I am finding it difficult getting the html of the clicked div, I tried .parent and such and it does not seem to work.

Would be grateful if someone point me to the correct dom call, thanks.

            <div class="listingContainer grid_9 alpha omega">
                <a class="listContent" href="adContent.html">
                    <div class="listingWrapper">
                        <div class="grid_8 alpha omega">
                            <div class="listingContent">
                                <div class="imgHolder">
                                    <img src="imgs/cars/SearchThumb-10053319.jpg" width="100" height="75">
                                </div>
                                <div class="descHolder">
                                    <div id="doneDeal"></div>
                                    <h3>Fancy Car</h3><div class="saveCompare"><strong>+</strong> Compare</div>
                                    <p>Lorem ipsum dolor sit amet, pri ex duis maiorum commune, illud viderer suscipiantur eam an. Dolorum recteque qui in. Pro inani nulla tacimates ex, qu</p>
                                <span class="listingPrice"><strong>€4,000</strong></span>
                                <span class="listingDate">Listed: <strong>Today</strong></span>
                                <span class="listingLocation">Co. Waterford</span>
                                <span class="listingViews">Viewed: 20 Times</span>
                                </div>
                            </div>
                        </div>
                        <div class="goTo goTo_unfocus grid_1 alpha omega">
                            <div class="gotoWrapper">
                                Click to View
                                <div class="imgVeiw"></div>
                            </div>
                        </div>
                    </div><!--End listingWrapper-->
                </a>
            </div>

Upvotes: 0

Views: 1629

Answers (6)

CamelCamelCamel
CamelCamelCamel

Reputation: 5200

This should accomplish what you are asking:

$(".saveCompare​​​").click(function() {
   alert($(this).closest(".listingContainer").html());
});​​

Upvotes: 3

Praveen Vijayan
Praveen Vijayan

Reputation: 6761

.listContent is an anchor tag and all the elements inside that. I'm not sure you will get "$('.saveCompare').click". Check this link

http://jsfiddle.net/Zh7HN/1/

Upvotes: 0

pimvdb
pimvdb

Reputation: 154858

To get the first parent that matches a specific selector, starting from an element going up, you can use .closest:

$(this).closest(".listingContainer");

Upvotes: 3

Fourth
Fourth

Reputation: 9351

$('.saveCompare').click(function() {
  $(this).parents('.listingContainer:first');
});

Upvotes: 0

Luccas
Luccas

Reputation: 4268

$(".saveCompare").parents(".listingContainer"​​)​.get(0)

Upvotes: 2

burak altundal
burak altundal

Reputation: 712

$(".saveCompare").click(function(ev){
  var listEl = $(this).parents(".listingContainer").first();
  //Do what ever you want with listEl. For example listEl.html() ..etc;
});

Upvotes: 2

Related Questions