Using Jquery each() to veiw individual divs (modals)

[son.of.the.morning]

I am trying to create a each() function to view individual modals in a php while loop.

 

open modal

<script type='text/javascript'>
jQuery(function ($) {
$('.basic').click(function (e) {
	$('#basic-modal-content').modal();

	return false;
});
});
</script>

I tried this but it's not working (.record_i looped div container holding the hidden Div (modal) )

<script type='text/javascript'>


	$('.Record_i').each(function() {
		var obj_modal = $(this);
		jQuery(function ($) {
			$('.basic',obj_modal).click(function (e) {
				$('#basic-modal-content',obj_modal).modal();

				return false;
			});
		});
	});


</script>

 

Any ideas?

[requinix]

The jQuery() stuff is about making $ available (if it were not before). As such it needs to be the outermost function call; everything else goes inside.

[son.of.the.morning]

I got on to that a few moments ago and tried the code below... but it still ante having non of it i cant see were am going wrong at all

 

jQuery(function ($) {
$('.basic').each(function() {
	var obj_click = $(this);
	$('.basic',obj_click).click(function (e) {
		$('#basic-modal-content').each(function() {
			var modal = $(this);
			$('#basic-modal-content',modal).modal();

			return false;
		});
	});
});
});

[scootstah]

What exactly is this script supposed to do?

[son.of.the.morning]

I am using a jquery modal function but i have a loop of records and in the loop i have a button which i want to view a model with the corresponding data for each item returned in the while loop.

 

[scootstah]

So why not do something like this?

$(document).ready(function(){
$('.basic').click(function(){
	$(this).children('div.hidden').modal();
});
});

<style type="text/css">.hidden { display:none; }</style>

<div class="basic">
  <div class="hidden">Lorem Ipsum</div>
</div>

[son.of.the.morning]

I would but i need the .basic item to be a href

[scootstah]

So then do this:

$(document).ready(function(){
$('.basic').click(function(e){
                e.preventDefault();

	$(this).children('div.hidden').modal();
});
});

<style type="text/css">.hidden { display:none; }</style>

<a class="basic">
  <div class="hidden">Lorem Ipsum</div>
</a>