Through a click I select an child object, a div with two classes. Now I like to work with a specific class in that div. This is what I have so far.
HTML
<div class="col-md-7">
<img class="img-modal img-responsive cursor-pointer" data-toggle="modal" data-target="#modal-45" src="http://placehold.it/350x150" alt="Image">
</div>
<!-- Modal -->
<div class="modal fade" id="modal-45" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content cursor-pointer" data-toggle="modal" data-target="#modal-45">
<div class="modal-header">
<button type="button" class="close" data-dismiss="#modal-45">×</button>
<h1 class="modal-title">Modal Title</h1>
</div>
<div class="modal-body">
<div class="img-center">
<img class="img-modal img-responsive" src="http://placehold.it/350x150" alt="Image">
</div>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-default" data-dismiss="modal">Close</a>
</div>
</div>
</div>
</div>
<!-- Modal end -->
jQuery
$(document).ready(function() {
$('.img-modal').on('click', function () {
var modalAltClicked = $(this).attr('alt');
console.log ('modalAltClicked = '+ modalAltClicked);
var modalIdClicked = $(this).attr('data-target');
console.log( 'modalIdClicked = ' + $(this).attr('data-target') );
var modalChilrdenDialog = $(modalIdClicked).children('.modal-dialog');
// this is the whole div with BOTH classes
console.log (modalChilrdenDialog);
var modalChilrdenDialogClass = $(modalChilrdenDialog).attr('class');
console.log (modalChilrdenDialogClass);
// now I want to work with the
// modalChilrdenDialog's ".modal-dialog" class
// how do I select it?
});
});
If you check the log you can see that var modalChilrdenDialog returns an object. From this object with I can obtain two classes with var modalChilrdenDialogClass, though the one I am interested to store in a variable for the action to follow is one with a specific name, .modal-dialog.
Could this be done with this https://stackoverflow.com/a/20611550/1010918 ?
$('.s').click(function()
{
var firstClass = $(this).attr('class').split(" ")[0];
});
Though how can I tell it to only work with the specific class name, .modal-dialog and not another one in case the class is not the first in the sequence of classes?
I have checked .closest but that travels up the dom, basically once clicked I like to work with a specific class of the child object. I am not looking for the first div with a specific class or classes in it. How can I select an element with multiple classes?
I am looking for the child object on click and then only like to work with one specific class of that object. Quite new at all this, not sure if this makes enough sense? Thank you for any help.
edit: With this bit I am able to get closer, but how do I get the clicked element from the object that returns all the selected elements in the dom?
var y = $(modalIdClicked).children('.modal-dialog').attr('class').split(" ")[0];
console.log (y);
// this is an array of all the .modal-dialog classes in the dom!!
// how do I get the one that has been clicked on? by data-target ttribute?
var z = $('.' + y);
console.log (z);
edit2: to clear things up I have come to understand what I really need. From the above given html I need two things. The modal id that has been clicked on and the corresponding modal-dialog class that opens up on click and belongs to the modal id that has been clicked.
For the first part I have ditched everything and started from scratch. With this I am able to get the data-target attribute of the img-modal clicked.
$('.img-modal').click(function(event) {
var target = $(event.target).data(target);
console.log (target);
var x = $(target);
console.log ( x );
// next step get children with class modal-dialog of $target
});
target returns an object with log Object {target: "#modal-45", toggle: "modal"}
With this here I did not get any further.
var x = $(target);
console.log ( x );
var y = $(target).attr('data-target');
console.log (y);
x gives me an object.
[Object, jquery: "1.11.2", constructor: function, selector: "", toArray: function, get: function…]
0: Object
target: "#modal-45"
toggle: "modal"
__proto__: Object
length: 1
__proto__: m[0]
And y show up as undefined in the log.
So how do I get the div with class modal-dialog from the object I got from the click?
How do I address the various modal divs with with their classes (let's say .modal-dialog) or with their data attribute ( e.g. .modal-content, that has the data attribute data-target) that belong to the modal id I got through the click?
Basically I need to be able to do work with any of the modal classes that belong to the img-modal that has been clicked to open said modal.
What is the correct approach here, having multiple modals all over the site?
