Skip to content

JQuery Get Data From Onther Div to Li

Brian Tompsett - 汤莱恩
user3601602

I want this operations using jQuery. On image click The item should add to the menu. Suppose I click on pizza image the it should add new li in ul with name pizza. When I again click on image 1 that pizza should be gone. This is code:

<body>
<div class="foodcourt">
    <div class="container">
        <header>
           
        </header>
        <section class="maincircle">

            <ul class="ch-grid">
                <li>
                    <div class="ch-item">
                        <div class="ch-info">
                            <div class="ch-info-front ch-img-1"></div>
                            <div class="ch-info-back">
                                <h3>Pizza</h3>
                                <p>Price: ₹100</p>
                            </div>
                        </div>
                    </div>
                </li>
                </section>
        <div class="menucard">
            <ul id="list">
            </ul>
        </div>
    </div>
</div>

Advertisement

Answer

Working Fiddle

Your HTML:

<div class="foodcourt">
    <div class="container">
        <section class="maincircle">
            <ul class="ch-grid">
                <li>
                    <div class="ch-item">
                        <div class="ch-info">
                            <div class="ch-info-front ch-img-1">
                                <img src="http://www.belfast-takeaways.co.uk/img/pizza.jpg" />
                            </div>
                            <div class="ch-info-back">
                                 <h3>Pizza</h3>

                                <p>Price: ₹100</p>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </section>
        <div class="menucard">
            <ul id="list"></ul>
        </div>
    </div>
</div>

Some jQuery:

$(".ch-img-1").live("click", function () {
    var newLi = $('.ch-info .ch-info-back h3').text();
    if ($("#list li:contains(" + newLi + ")").length) {
        $($("#list li:contains(" + newLi + ")")).remove();
    } else {
        $('.menucard #list').append('<li>' + newLi + '</li>');
    }
});

Voila!