When .html is used to get a jQuery content , Ithe content loses jQuery functions.
<div id="mainContent">
<div class="photoShow"></div>
<div class="photo_nav"></div>
<div class="photo_caption">
<div class="photo_caption_content"></div>
</div>
// .photo_content has jQuery content and photo background
<div id="content">
<div class="photo_content"></div>
<div class="photo_content"></div>
<div class="photo_content"></div>
</div>
<script>
$('.photo_nav a.photo_nav_item').click(function(){
var navClicked = $(this).index();
var Photo = $('.photo_content').get(navClicked);
var curPhoto = $(Photo).html();
$(".photo_nav a.photo_nav_item").removeClass('current');
$(".pho开发者_如何学JAVAtoShow").removeClass('current');
$(this).addClass('selected');
$(".photoShow").fadeIn('slow', 'swing');
$(".photoShow").html(curPhoto);
});
</script>
// .photo_content has jQuery properties which runs fine by itself. But with this click //function, it loses the properties. Using .get, instead of .html i.e.
$(".photoShow").get(Photo);
//keeps the contents working but then I lose navigation index property.
//in conclusion, with .html, it displays correct .photo_content but DOM does not work.
//With .get, I get .photo_content that works but indexing does not work.
Not 100% clear on the question. But .get() and .html() return fundamentally different things.
.get() returns a DOM element
.html() returns (or sets) a string of HTML content.
Also note that this would not make sense:
$(".photoShow").get(Photo);
Unless Photo was an integer, which according to your code it isn't.
Does that help? If not - which line of your posted code isn't doing what you expect?
i think you are making some confusion:
html() returns the html content of the first matched selector. so if you have:
<div id='container'><div id='content'>Content</div></div>
$('#container').html();//returns <div id="content">Content</div> which is a string
get() retruns a dom element
<div id='container'><div id='content'>Content</div></div>
$('#container').get(0);//returns a dom object
精彩评论