Блог

Главная - Вопросы по программированию - как присвоить значения innerhtml элементам внутри клонированного div

как присвоить значения innerhtml элементам внутри клонированного div

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

Я реализую форму поиска, для этого мне нужны динамические divs для отображения результатов поиска. Теперь я пытаюсь,

  1. создайте элементы html.

  2. для каждого результата клонируйте структуру и замените внутренний html соответствующих элементов моими результатами.

  3. Добавьте результат к существующим результатам. но я не знаю, как заменить innerhtml результатами. Я создал следующий код в html,`

 <div id="resultsDiv">
    <div id="webResult">
        <div id="heading"></div>
        <p id="s_item"></p>
        <h5 id="s_description"></h5>
        <span id="s_offer"></span>
    </div>
</div>

и для javascript я создал,

 templete_element=document.getElementById('resultsDiv');
for(i=0;i<result_count;i  ){
    $("#webResult").clone().insertAfter("#webResult");
}

Для каждого выполнения цикла for мне нужно:

  • замените внутренний html идентификатора «заголовок» на dataArray.root.data.partners[0].item_heading

  • замените внутренний html-код идентификатора ‘s_item’ на dataArray.root.data.partners[0].item_name

  • замените внутренний html-код идентификатора ‘s_description’ на dataArray.root.data.partners[0].item_description

  • замените внутренний html-код идентификатора ‘s_offer на’ dataArray.root.data.partners[0].item_offer

Пожалуйста, простите меня, если мой язык плохой. спасибо.

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

1. Этот метод создает повторяющиеся идентификаторы

2. Почему вы используете чистый javascript selector ( document.getElementById ) и jquery selector одновременно?

Ответ №1:

Вам следует избегать создания элементов с повторяющимися идентификаторами на странице, это делает невозможным ссылаться на них, поскольку идентификатор должен быть уникальным. Вместо этого вы должны изменить свою разметку для работы с классами:

 <div id="resultsDiv">
    <div class="webResult">
        <div class="heading"></div>
        <p class="s_item"></p>
        <h5 class="s_description"></h5>
        <span class="s_offer"></span>
    </div>
</div>

После этого вы можете работать с этими классами вместо этого:

 for(i=0;i<result_count;i  ){
    var myResult = $(".webResult:first").clone().insertAfter(".webResult:last");
    myResult.find('.heading').html( 'put dynamic data here' );
}

Я использовал первый и последний модификаторы, чтобы получить первый элемент в качестве «шаблона» и добавить его к последнему, созданному в цикле.