Блог

Главная - Вопросы по программированию - Добавление jQuery () и data()

Добавление jQuery () и data()

#javascript #jquery #append

#javascript #jquery #добавить

Вопрос:

У меня неизвестное количество разделов с увеличивающимися идентификаторами:

 <div id="source-1" data-grab="someURL"/>Content</div>
<div id="source-2" data-grab="anotherURL"/>Content</div>
<div id="source-3" data-grab="anddifferentURL"/>Content</div>
<div id="source-4" data-grab="andthelastoneURL"/>Content</div>

И у меня есть другой список:

 <ul>
   <li id="target-1" class="target"><a href="#"> </a></li>
   <li id="target-2" class="target"><a href="#"> </a></li>
   <li id="target-3" class="target"><a href="#"> </a></li>
   <li id="target-4" class="target"><a href="#"> </a></li>
</ul>

Теперь, чего я хочу достичь, это захватить URL-адрес data-grab из source-1 и добавить его к target-1 в виде изображения и так далее. Итак, в конечном итоге выходной список будет выглядеть так:

 <ul>
       <li id="target-1"><a href="#"><img src="someURL" /> </a></li>
       <li id="target-2"><a href="#"><img src="anotherURL" /> </a></li>
       <li id="target-3"><a href="#"><img src="anddifferentURL" /> </a></li>
       <li id="target-4"><a href="#"><img src="andthelastoneURL" /> </a></li>
</ul>

Я беру все данные из первого списка, но я не уверен, как добавить правильный исходный элемент к правильному целевому элементу?

  $(document).ready(function(){
                $('.target').each(function(){
                var URL = jQuery(this).data('grab');
                });
            });

Ответ №1:

 $(document).ready(function(){
  $('.target').each(function(){
     var $this = $(this);
     var divID = "source-"   ($this.id()).split("-")[1];
     $("a", $this).append('<img src="'   $(divID).data("grab")   '" />');
  });
});

Комментарии:

1. почему там var $ this, а не «var this»? 🙂 Я работаю над своим скриптом и собираюсь сказать, сработает ли он, но я уверен, что так и будет!

2. @Wordpressor использование var $this = $(this) сокращает вызов селектора jquery и делает код немного более эффективным, чем постоянное использование $ (this) везде.

3. Разве divID не соответствует «source1», а не «source-1»?

Ответ №2:

Вы можете использовать индексы для выбора правильных элементов, если добавите класс к своим исходным элементам (например .source ):

  $(document).ready(function(){
                var targets = $( '.target' );
                $('.source').each(function(index, value){
                    $(target[index]).children("a").first().append($("<img src="   value.data('grab')   " />"));
                });
            });