Проблема с уникальным html () jQuery

Question

У меня есть функция jQuery, которая, если она попадет в определенный класс, заключает его в несколько других дивов.

(document).ready(function(){
   var Text = $('.bd_box_cont').html();
   $('.bd_box_cont').html(" 
      <div class='bd_box_tl'><div class='bd_box_rt'>" + Text +"</div></div>

   ");
)}

Единственная проблема в том, что у меня на сайте более одного контейнера, и он помещает один и тот же HTML-код в каждый из них.

Как я могу вернуть var Text для конкретного контейнера?

Заранее благодарю за помощь

Answer 1

Вы должны уделять больше внимания селекторам jquery - http://docs.jquery.com/Selectors Существует множество способов получить ваш объект на основе фильтра.

$('.bd_box_cont:first').html
     ("       <div class='bd_box_tl'><div class='bd_box_rt'>" + Text +"</div></div>   
"); 

например получает ваш первый контейнер

Answer 2

Вы можете сделать это проще, используя .wrapInner () :

$(document).ready(function(){
     $('.bd_box_cont').wrapInner("<div class='bd_box_tl'><div class='bd_box_rt'></div></div>');
});

Answer 3

Вы используете функции класса jquery (поэтому каждый div с классом bd_box_cont получает этот html. Если вы хотите, чтобы только один div имел этот html, просто используйте ids (#bd_box_cont) .html ... остальной код.

Answer 4

Вы также можете использовать что-то вроде этого (скажем, вы хотите изменить, т.е. второй контейнер):

var container = $('.bd_box_cont').get(1);
var Text = $(container).html();
$(container).html(" 
  <div class='bd_box_tl'><div class='bd_box_rt'>" + Text +"</div></div>
");

другая опция, которая делает то же самое:

var container = $('.bd_box_cont:eq(1)');
var Text = container.html();
container.html(" 
  <div class='bd_box_tl'><div class='bd_box_rt'>" + Text +"</div></div>
");

Answer 5

Как сказал @greg, используйте wrapInner(). Для дальнейшего использования, если вы хотите что-то сделать с каждым элементом элемента, для которого одной из собственных функций будет недостаточно, используйте each():

$('.bd_box_cont').each(function() {
  this_element = $(this);
});