Получить внутренний Html по идентификатору данных

Question

У меня есть много <li> с указанием c data-id, я хочу получить внутренний Html первого <Div>

Например, в этом примере это будет: "World"

<li class="dd-item" data-id="1123066248731271" data-slug="" data-new="1" data-deleted="0"><div class="dd-handle">World</div> <span class="button-delete btn btn-danger btn-xs pull-right" title="Delete" data-owner-id="1123066248731271"> <i class="fa fa-times" aria-hidden="true"></i> </span><span class="button-edit btn btn-success btn-xs pull-right" title="Edit" data-owner-id="1123066248731271"><i class="fa fa-pencil" aria-hidden="true"></i></span></li>

Это мой код, который не помогает:

var target = $('[data-id="1123066248731271"]');
alert(target.firstChild.innerHTML); 

Answer 1

document.querySelector('[data-id="1123066248731271"]').textContent

Answer 2

Может быть, это то, что вам нужно?

Будучи элементом jquery, вы можете использовать метод find(), чтобы найти все элементы div внутри него, с first(), вы получите первый элемент, наконец, с html(), вы получите его содержимое.

var target = $('[data-id="1123066248731271"]');
alert(target.find('div').first().html());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<li class="dd-item" data-id="1123066248731271" data-slug="" data-new="1" data-deleted="0"><div class="dd-handle">World</div> <span class="button-delete btn btn-danger btn-xs pull-right" title="Delete" data-owner-id="1123066248731271"> <i class="fa fa-times" aria-hidden="true"></i> </span><span class="button-edit btn btn-success btn-xs pull-right" title="Edit" data-owner-id="1123066248731271"><i class="fa fa-pencil" aria-hidden="true"></i></span></li>

Answer 3

первая проблема $('[data-id="1123066248731271"]') вернул объект всех элементов с [data-id = "1123066248731271"]. для нацеливания на первый элемент, вам нужно добавить [0] после: $('[data-id="1123066248731271"]')[0]

сейчас, если вы хотите нацелить элемент div, вам нужно указать div в $ like: $('[data-id="1123066248731271"] div')[0]. Теперь у вас есть первый div и вы можете получить внутренний HTML с: target.innerHTML

Полный код:

var target = $('[data-id="1123066248731271"] div')[0];
alert(target.innerHTML); 

и без Jquery (проще я думаю):

var target = document.querySelector('[data-id="1123066248731271"] div');
alert(target.innerHTML); 

Answer 4

Возможно, вы хотите использовать firstElementChild вместо firstChild?

Или вы можете использовать селектор CSS [data-id="1123066248731271"] > div:first-child:

  var target = $('[data-id="1123066248731271"] > div:first-child');
  alert(target.innerHTML);

Редактировать:

Я заметил ошибку перевода. Я не использую jQuery сам, поэтому вместо $ я использовал document.querySelector. Но поведение $ соответствует document.querySelectorAll вместо этого. Извините ...

Это должно работать нормально:

  var target = $('[data-id="1123066248731271"] > div:first-child')[0];
  alert(target.innerHTML);

или это:

  var target = document.querySelector('[data-id="1123066248731271"] > div:first-child');
  alert(target.innerHTML);

Как пользователь, не являющийся jQuery, я лично предпочитаю последнее .