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 mune, 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>

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 mune, 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>

• javascript
• jquery

6 Answers 6

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

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

This should acplish what you are asking:

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

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

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

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

.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/Zh7HN/1/