Как мне установить текст дочернего элемента внутри повторителя?

StackOverflow https://stackoverflow.com/questions/1207312

  •  05-07-2019
  •  | 
  •  

Вопрос

У меня есть ретранслятор, содержащий следующий фрагмент HTML-кода:

<div id='parent'>
    <div id='child1'/>
    <div id='child2'>
         <script type="text/javascript" src="script.js"></script>
    </div>
</div>

Я хотел бы выбрать div с тегом "parent", используя функцию внутри script.js и установить внутренний HTML-код div с идентификатором "child1".

Мой окончательный html-код должен выглядеть следующим образом:

<div id='parent'>
    <div id='child1'>This inner text was set by jQuery</div>
    <div id='child2'>
        <script type="text/javascript" src="script.js"></script>
    </div>
</div>

Как мне это сделать с помощью jQuery?

Это было полезно?

Решение

Во-первых, вы не можете так закодировать свой HTML в ретрансляторе. Вы не можете назначить одинаковые идентификаторы нескольким элементам на странице. Ваш HTML должен будет использовать классы для идентификации, если вы вообще их идентифицируете. 

<div class="parent">
  <div class="child1"><div>
  <div class="child2">Click Me<div>
</div>

Функции в теге script не могут знать, где они находятся в DOM, относительно всего остального. Вам нужно привязать вызов функции к какому-либо элементу, чтобы иметь возможность вывести относительные отношения DOM к нему. Самый простой способ - использовать jQuery (или другой фреймворк) для добавления некоторого обработчика к элементам. 

$(function() {
    $('.child2').click( function() {
        $(this).parent().find('.child1').html( 'some html' );
    });
});

Вышеприведенное добавит обработчик кликов к каждому DIV с классом child2 и при щелчке найдет его родительский DIV (обратите внимание, что этот класс не нужен для родителя), а затем правильный дочерний элемент чей HTML обновлять в зависимости от его класса. Также обратите внимание, что приведенный выше сценарий необходимо добавлять на страницу только один раз, а не один раз для каждого элемента повторителя.

Другие советы

$('#parent').children('#child1').html('html goes here');

В вашем вопросе нет особого смысла.Ты можешь просто сделать это:

$("#child1").html("blah");

Вам не нужна ссылка на #parent или this.

Но если предположить, что это было не так, есть несколько способов, которыми вы можете найти элемент относительно this:

$(this).children("#child1")

или

$(this).find("#child1") // descendant, not just child

или

$("#child1", this) // descendant, not just child
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top