2

I have many <li> with specific data-id, want to get innerHtml of first <Div>

For Example on this sample, it would to be: "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>

This is my code, that doesn't help:

var target = $('[data-id="1123066248731271"]');
alert(target.firstChild.innerHTML);
مهدی نبوی
  • 471
  • 5
  • 15
  • Does this answer your question? [jQuery how to find an element based on a data-attribute value?](https://stackoverflow.com/questions/4191386/jquery-how-to-find-an-element-based-on-a-data-attribute-value) – Heretic Monkey Mar 02 '20 at 21:11
  • Probably jQuery doesn’t have a .firstChild property. What error message do you get? – James Mar 02 '20 at 21:12
  • The `innerHTML` of that element would not be "World"; it would be `
    World
    ` You likely want the text, which you get using the [`text()`](https://api.jquery.com/text/) function.     – Heretic Monkey Mar 02 '20 at 21:13

4 Answers4

3
document.querySelector('[data-id="1123066248731271"]').textContent
EugenSunic
  • 13,162
  • 13
  • 64
  • 86
  • This might work as well. But note that it will probably return the inner textual content of your *entire* `li` element, not just the first `div`. (But if only the first `div` contains textual content that would be OK, I guess.) – Bart Hofland Mar 02 '20 at 21:24
2

first problem $('[data-id="1123066248731271"]') returned a object of all elements with [data-id="1123066248731271"]. for target the first element, you need add [0] after : $('[data-id="1123066248731271"]')[0]

now if you want target the div element you need specify div into $ like: $('[data-id="1123066248731271"] div')[0]. Now you got the first div and you can get innerHTML with : target.innerHTML

The full code :

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

and without Jquery ( more simply i think ) :

var target = document.querySelector('[data-id="1123066248731271"] div');
alert(target.innerHTML);
Elias Bracaval
  • 66
  • 4
2

Maybe this is what you need?

Being a jquery element, you can use find() method to find all the div elements inside him, with first(), you get the first element, finally, with html(), you get its content.

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>
John
  • 770
  • 1
  • 9
  • 18
1

Perhaps you want to use firstElementChild instead of firstChild?

Or you could use the CSS selector [data-id="1123066248731271"] > div:first-child:

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

Edit:

I noticed a translation error. I don't use jQuery myself, so instead of $ I used document.querySelector. But the behavior of $ corresponds to document.querySelectorAll instead. Sorry...

This should work fine:

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

or this:

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

As a non-jQuery user, I personally prefer the latter.

Bart Hofland
  • 3,700
  • 1
  • 13
  • 22