通过数据id获取innerHtml

Question

我有许多具有特定data-id的<li>，想要获得第一个<Div>的innerHtml

例如，在这个样本上，它应该是："世界">

<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"]。对于目标第一个元素，您需要在：$('[data-id="1123066248731271"]')[0]之后添加[0]

现在，如果您想要以div元素为目标，则需要将div指定为$like:$('[data-id="1123066248731271"] div')[0]。现在您获得了第一个div，并且可以使用：target.innerHTML获得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而不是$。但CCD_ 17的行为与CCD_。很抱歉

这应该很好：

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