how can content between a class put in a variable after click?

Question

How do I retrieve the content between and including the following <div class="adding"> and store it in a variable?

<div class="adding">
    <b>
        <div class="column">
            <div class="mediumCell">
                <input type="text" name="name" placeholder="توضیح" title="نام پکیج تور خارجی">
            </div>
        </div>
        <div class="column" style="margin: 5px 3px;">
            <div class="mediumCell">
                <div class="adda">
                    <a href="#" class="add_input"></a>
                </div>
            </div>
        </div>
    </b>
</div>

var adding = '<div class="adding"><b><div class="column"><div class="mediumCell"><input type="text" name="name" placeholder="توضیح" title="نام پکیج تور خارجی"></div></div><div class="column" style="margin: 5px 3px;"><div class="mediumCell"><div class="adda"><a href="#" class="add_input"></a></div></div></div></b></div>'

In each click I want to get the content just once.

Unfortunately, after two or more clicks getting content several times together (E.x: after two clicks it stores the content twice).

I tried this:

$(function () {        
    var i = $('.adding').size();
    $('.add_input').live('click', function () {
        var scntDiv = '.' + $(this)
                           .closest('.find_input')
                           .find('div')
                           .attr('class');
            var input = $(scntDiv).html();
            $(this).remove();
            $(input).appendTo(scntDiv);
            i++;
            return false;
        });
});

Check this post: http://stackoverflow.com/questions/2419749/get-selected-elements-outer-html — Chandu, Jul 22 '11 at 13:25

T.J. Crowder · Answer 1 · 2011-07-22T13:31:07.260

You can get the inner HTML using the html function:

var adding = $(".adding").html():

...which will give you the browser's version of the markup within the first matching div (the first div with the class "adding"). It's fairly simple at that point to wrap it with the markup for the div, unless there are a lot of chaotic attributes involved.

However, note that the markup you get back may not be what you expect, because your HTML is invalid. b elements cannot contain div elements (b elements may only contain phrasing content; div elements are flow content), and so the browser adjust things as it sees fit to display something reasonable. This is a Bad Thing^(tm), it's much better with dynamic web apps to ensure that your HTML is valid.

Frédéric Hamidi · Accepted Answer · 2011-07-22T13:43:28.870

2

You can use the html() method, as others have said, but there's a catch: that method returns the inner HTML content of the element, so the markup of the outer <div> element won't be included in the result.

Since you seem to want that markup, you can work around the issue with clone(), wrap() and parent():

var adding = $("div.adding").clone().wrap("<div>").parent().html();

edited Jul 22 '11 at 13:43

answered Jul 22 '11 at 13:29

Frédéric Hamidi

258,201
41
486
479

@T.J. Crowder: If you're going to use this very often, it's a piece of cake to wrap it in a plugin. – Tomas Aschan Jul 22 '11 at 13:37
@Tomas: I mean it's a lot of work to clone a bunch of elements just to get the outer markup... – T.J. Crowder Jul 22 '11 at 13:52
1

...as someone has already done (but with a slightly different solution) :P http://yelotofu.com/2008/08/jquery-outerhtml/ (linked to in the post that Cybernate linked to in his comment on the question) – Tomas Aschan Jul 22 '11 at 13:52

score 0 · Answer 3 · answered Jul 22 '11 at 13:25

0

Is that what you're asking for ?

var adding;
$('.adding').click(function(){
    adding = $(this).html();
    alert(adding);
});

answered Jul 22 '11 at 13:25

Shikiryu

10,180
8
49
75

He wants the *outer* HTML, not the inner. I made the same mistake at first. – T.J. Crowder Jul 22 '11 at 13:31

score 0 · Answer 4 · answered Jul 22 '11 at 13:25

0

var adding = $(".adding").html();

maybe?

answered Jul 22 '11 at 13:25

genesis

50,477
20
96
125

how can content between a class put in a variable after click?

4 Answers4