jQueryを使用して、単一の子要素を選択するにはどうすればよいですか？Traversing APIを確認しましたが、次のimgようなすべての直接の子要素を選択できることがわかりました。
$(this).children('img');
そして、最初の子img要素を選択するには、次のような添え字を使用できます。
$(this).children('img')[0];
しかし、私はこれができないことにちょっと驚いていると思います：
$(this).child('img'); // no subscript, returns single element
それとも私は何かを逃したことがありますか？
私はあなたがしたいことはこれだと思います：
$(this).children('img').eq(0);
これにより、最初のimg要素を含むjqueryオブジェクトが得られますが、
$(this).children('img')[0];
img要素自体を提供します。
いいえ。すべてのjQuery関数はjQueryオブジェクトを返します。これが、その仕組みです。これはjQueryの魔法の重要な部分です。
基になる要素にアクセスする場合は、3つのオプションがあります...
[0]それを参照するために使用するjQueryを拡張して、やりたいことを実行します...
$.fn.child = function(s) {
return $(this).children(s)[0];
}
多分このように？
$('img', this)[0]
jQueryでCSSセレクターを使用するだけで、最初の子要素をターゲットにできます。
$(this).children('img:nth-child(1)');
2番目の子要素をターゲットにする場合は、1を2に変更します。
$(this).children('img:nth-child(2)');
等々..
より多くの要素をターゲットにする場合は、forループを使用できます。
for (i = 1; i <= $(this).children().length; i++) {
let childImg = $(this).children("img:nth-child("+ i +")");
// Do stuff...
}
質問が求めるように、そうではありませんjQueryが、ネイティブに（つまり、ライブラリは必要ありません）、この仕事に適したツールはquerySelector、セレクターの単一のインスタンスを取得することだと思います。
let el = document.querySelector('img');
console.log(el);
一致するすべてのインスタンスには、を使用しますdocument.querySelectorAll()。または、別の要素内のインスタンスには、次のようにチェーンできます。
// Get some wrapper, with class="parentClassName"
let parentEl = document.querySelector('.parentClassName');
// Get all img tags within the parent element by parentEl variable
let childrenEls = parentEl.querySelectorAll('img');
上記は次と同等であることに注意してください。
let childrenEls = document.querySelector('.parentClassName').querySelectorAll('img');
<html>
<title>
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
<body>
<!-- <asp:LinkButton ID="MoreInfoButton" runat="server" Text="<%#MoreInfo%>" > -->
<!-- </asp:LinkButton> -->
<!-- </asp:LinkButton> -->
<br />
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
<div>
<a><span id="imgDownArrow_0" class="glyphicon glyphicon-chevron-right " runat="server"> MoreInformation</span></a>
<div id="parent" class="dataContentSectionMessages" style="display:none">
<!-- repeater1 starts -->
<!-- <sc:text field="Event Description" runat="server" item="<%#Container.DataItem %>" /> -->
<ul >
<li ><h6><strong>lorem</strong></h6></li>
<li ><h6><strong>An assigned contact who knows you and your lorem analysis system</strong></h6></li>
<li ><h6><strong>Internet accessible on-demand information and an easy to use internet shop</strong></h6></li>
<li ><h6><strong>Extensive and flexible repair capabilities at any location</strong></h6></li>
<li ><h6><strong>Full Service Contracts</strong></h6></li>
<li ><h6><strong>Maintenance Contracts</strong></h6></li>
</ul>
<!-- repeater1 ends -->
</div>
</div>
<div>
<a><span id="imgDownArrow_0" class="glyphicon glyphicon-chevron-right " runat="server"> MoreInformation</span></a>
<div id="parent" class="dataContentSectionMessages" style="display:none">
<!-- repeater1 starts -->
<!-- <sc:text field="Event Description" runat="server" item="<%#Container.DataItem %>" /> -->
<ul >
<li ><h6><strong>lorem</strong></h6></li>
<li ><h6><strong>An assigned contact who knows you and your lorem analysis system</strong></h6></li>
<li ><h6><strong>Internet accessible on-demand information and an easy to use internet shop</strong></h6></li>
<li ><h6><strong>Extensive and flexible repair capabilities at any location</strong></h6></li>
<li ><h6><strong>Full Service Contracts</strong></h6></li>
<li ><h6><strong>Maintenance Contracts</strong></h6></li>
</ul>
<!-- repeater1 ends -->
</div>
</div>
<div>
<a><span id="imgDownArrow_0" class="glyphicon glyphicon-chevron-right " runat="server"> MoreInformation</span></a>
<div id="parent" class="dataContentSectionMessages" style="display:none">
<!-- repeater1 starts -->
<!-- <sc:text field="Event Description" runat="server" item="<%#Container.DataItem %>" /> -->
<ul >
<li ><h6><strong>lorem</strong></h6></li>
<li ><h6><strong>An assigned contact who knows you and your lorem analysis system</strong></h6></li>
<li ><h6><strong>Internet accessible on-demand information and an easy to use internet shop</strong></h6></li>
<li ><h6><strong>Extensive and flexible repair capabilities at any location</strong></h6></li>
<li ><h6><strong>Full Service Contracts</strong></h6></li>
<li ><h6><strong>Maintenance Contracts</strong></h6></li>
</ul>
<!-- repeater1 ends -->
</div>
</div>
<div>
<a><span id="imgDownArrow_0" class="glyphicon glyphicon-chevron-right " runat="server"> MoreInformation</span></a>
<div id="parent" class="dataContentSectionMessages" style="display:none">
<!-- repeater1 starts -->
<!-- <sc:text field="Event Description" runat="server" item="<%#Container.DataItem %>" /> -->
<ul >
<li ><h6><strong>lorem</strong></h6></li>
<li ><h6><strong>An assigned contact who knows you and your lorem analysis system</strong></h6></li>
<li ><h6><strong>Internet accessible on-demand information and an easy to use internet shop</strong></h6></li>
<li ><h6><strong>Extensive and flexible repair capabilities at any location</strong></h6></li>
<li ><h6><strong>Full Service Contracts</strong></h6></li>
<li ><h6><strong>Maintenance Contracts</strong></h6></li>
</ul>
<!-- repeater1 ends -->
</div>
</div>
</asp:Repeater>
</body>
<!-- Predefined JavaScript -->
<script src="jquery.js"></script>
<script src="bootstrap.js"></script>
<script>
$(function () {
$('a').click(function() {
$(this).parent().children('.dataContentSectionMessages').slideToggle();
});
});
</script>
</html>