Когда .html используется для получения контента jQuery, контент теряет функции jQuery.

Question

<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');
  $(".photoShow").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.

Answer 1

Не на 100% ясно по этому вопросу. Но .get () и .html () возвращают принципиально разные вещи.

.get () возвращает элемент DOM

.html () возвращает (или устанавливает) строку содержимого HTML.

Также обратите внимание, что это не имеет смысла:

$(".photoShow").get(Photo);

Если фото не было целым числом, которое, согласно вашему коду, не является.

Это помогает? Если нет - какая строка вашего размещенного кода не соответствует вашим ожиданиям?

Answer 2

Я думаю, вы путаете:

html () возвращает html-содержимое первого соответствующего селектора. так что если у вас есть:

<div id='container'><div id='content'>Content</div></div>

$('#container').html();//returns <div id="content">Content</div> which is a string

get () повторяет элемент dom

<div id='container'><div id='content'>Content</div></div>

$('#container').get(0);//returns a dom object