Chose one from same divs on click jQuery

Question

Have a problem that can not solve (I'm new in jScript).

I have 3 rows, each contains 4 blocks, row in HTML below (bootstrap):

<div class="row product-element">
      <div class="col-lg-3 col-md-3">
        <div class="product-element-container">
          <img src="img/1_mini.jpg" alt="Texto Alternativo 1" class="img-thumbnail">
          <h4>Some text H4</h4>
          <p>Some text p</p>
          <p>Some text p</p>
        </div>
        <a href="#" class="btn btn-success launch-modal" data-modal-id="modal-register" data-img-url="img/1_mini.jpg" title="buy">BUY</a>
      </div>
...
...
...
</div>

I have also modal window, that opens when user click "buy" button, and I need to copy and

elements from "product-element-container" to modal window.

Problem: I don't know how to create proper "select" in jQuery that will chose div with pressed button. What is the best way to do this?

are you looking for ? https://api.jquery.com/clone/ see also http://stackoverflow.com/questions/306583/this-selector-and-children clone to copy part of html and send it into modal, so link if you want to select specific children — G-Cyrillus, May 12 '16 at 17:07
@GCyrillus thanks for reply. I've studied methods to copy information in divs, my weak point - selectors. Solution - siblings() method. :) — Stepanov Vlad, May 13 '16 at 09:15

score 0 · Answer 1 · answered May 12 '16 at 16:50

0

You can use $(this).siblings('.product-element-container') within your button click event callback function.

answered May 12 '16 at 16:50

Uzbekjon

11,655
3
37
54

waffle · Accepted Answer · 2016-05-12T17:21:29.127

This is a very simple implementation of what you're trying to do:

$('a.launch-modal').click(function() {
    var content = $(this).siblings('.product-element-container').html();
    $('#modal-register').html(content);
});

First, you add an on click event listener to all <a class="launch-modal"> elements, the callback (i.e. what happens after you click) gets the HTML content of the corresponding <div class="product-element-container"> element and puts it in the <div id="modal-register>

score 0 · Answer 3 · answered May 12 '16 at 17:24

First give classes to h4 and your p tags inside the container that you want to copy.

Second add an attribute such as data- btnId="button id here" to the button.

Next bootstrap have a event on modal open show.bs.modal and shown.bs.modal which fires on opening and after modal is being rendered on page respectively.

   $( '#your modal id" ).on
    ('show.bs.modal' , function
    (event) {
    var button =
    $(event.relatedTarget) //  Button that triggered the modal
     var recipient = button.data
   ('btn id here which is inside container' ) //   Extract info  from data-* attributes

    var modal = $( this)
    modal.find( "h4").text( receipt.   parent(".    containerClassNameHereWhoseContentToBeCopied").   find("h4.classNameOfH4TagHereWhich.   IsInsideContainer).text());

    // Do same for P tags.
 })

Note* your modal should have h4 and p tags. Or you can put values/text to any tag.

Chose one from same divs on click jQuery

3 Answers3