通过 data-id 获取 innerHtml

Question

我有很多 <li> 具有特定 data-id，想要获取第一个 <Div>

的 innerHtml

例如，在此示例中，它将是："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

也许您想使用 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用户，我个人更喜欢后者。

Answer 3

第一个问题 $('[data-id="1123066248731271"]') 返回了包含 [data-id="1123066248731271"] 所有元素的对象。对于第一个元素，你需要在 : $('[data-id="1123066248731271"]')[0]

之后添加 [0]

现在，如果您想要定位 div 元素，您需要将 div 指定为 $，例如：$('[data-id="1123066248731271"] div')[0]。现在你得到了第一个 div 并且你可以通过以下方式获得 innerHTML：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

也许这就是您需要的？

作为一个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>

通过 data-id 获取 innerHtml

Get innerHtml by data-id

html

javascript

innerhtml