blocks|key|1230870|text|我认为你想要做的是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1230871|$(this).children('img').eq(0);|code-block|syntax|javascript|1230872|这将为您提供一个包含第一个img元素的jquery对象，而|1230873|$(this).children('img')[0];|1230874|将为您提供img元素本身。|1230875|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>I think what you want to do is this:</p>

<pre><code>$(this).children('img').eq(0);
</code></pre>

<p>this will give you a jquery object containing the first img element, whereas </p>

<pre><code>$(this).children('img')[0];
</code></pre>

<p>will give you the img element itself.</p>


blocks|key|1445804|text|也许是这样吧？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1445805|$('img',+this)[0]|code-block|syntax|javascript|1445806|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Maybe in this way? </p>

<pre><code>$('img', this)[0]
</code></pre>


blocks|key|1445824|text|<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>





+


<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">
++++
++++++++
++++++++++++<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>
++++
</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">
++++
++++++++
++++++++++++<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>
++++
</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">
++++
++++++++
++++++++++++<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>
++++
</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">
++++
++++++++
++++++++++++<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>
++++
</div>
</div>




</asp:Repeater>


</body>

<script+src="jquery.js"></script>
<script+src="bootstrap.js"></script>

<script>

+$(function+()+{
++++++++$('a').click(function()+{
++++++++++++$(this).parent().children('.dataContentSectionMessages').slideToggle();
++++++++});
++++});

++++</script>


</html>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1445825|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>&lt;html&gt;
&lt;title&gt;

    &lt;/title&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css"&gt;
&lt;body&gt;




&lt;!-- &lt;asp:LinkButton ID="MoreInfoButton" runat="server" Text="&lt;%#MoreInfo%&gt;" &gt; --&gt;
 &lt;!-- &lt;/asp:LinkButton&gt; --&gt;
&lt;!-- &lt;/asp:LinkButton&gt; --&gt;

&lt;br /&gt;
&lt;asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1"&gt;
&lt;div&gt;
&lt;a&gt;&lt;span id="imgDownArrow_0" class="glyphicon glyphicon-chevron-right " runat="server"&gt; MoreInformation&lt;/span&gt;&lt;/a&gt;
&lt;div id="parent" class="dataContentSectionMessages" style="display:none"&gt;
    &lt;!-- repeater1 starts --&gt;
        &lt;!-- &lt;sc:text field="Event Description" runat="server" item="&lt;%#Container.DataItem %&gt;" /&gt; --&gt;
            &lt;ul  &gt;
                &lt;li &gt;&lt;h6&gt;&lt;strong&gt;lorem&lt;/strong&gt;&lt;/h6&gt;&lt;/li&gt;
                &lt;li &gt;&lt;h6&gt;&lt;strong&gt;An assigned contact who knows you and your lorem analysis system&lt;/strong&gt;&lt;/h6&gt;&lt;/li&gt;
                &lt;li &gt;&lt;h6&gt;&lt;strong&gt;Internet accessible on-demand information and an easy to use internet shop&lt;/strong&gt;&lt;/h6&gt;&lt;/li&gt;
                &lt;li &gt;&lt;h6&gt;&lt;strong&gt;Extensive and flexible repair capabilities at any location&lt;/strong&gt;&lt;/h6&gt;&lt;/li&gt;
                &lt;li &gt;&lt;h6&gt;&lt;strong&gt;Full Service Contracts&lt;/strong&gt;&lt;/h6&gt;&lt;/li&gt;
                &lt;li &gt;&lt;h6&gt;&lt;strong&gt;Maintenance Contracts&lt;/strong&gt;&lt;/h6&gt;&lt;/li&gt;
            &lt;/ul&gt;
    &lt;!-- repeater1 ends --&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;a&gt;&lt;span id="imgDownArrow_0" class="glyphicon glyphicon-chevron-right " runat="server"&gt; MoreInformation&lt;/span&gt;&lt;/a&gt;
&lt;div id="parent" class="dataContentSectionMessages" style="display:none"&gt;
    &lt;!-- repeater1 starts --&gt;
        &lt;!-- &lt;sc:text field="Event Description" runat="server" item="&lt;%#Container.DataItem %&gt;" /&gt; --&gt;
            &lt;ul  &gt;
                &lt;li &gt;&lt;h6&gt;&lt;strong&gt;lorem&lt;/strong&gt;&lt;/h6&gt;&lt;/li&gt;
                &lt;li &gt;&lt;h6&gt;&lt;strong&gt;An assigned contact who knows you and your lorem analysis system&lt;/strong&gt;&lt;/h6&gt;&lt;/li&gt;
                &lt;li &gt;&lt;h6&gt;&lt;strong&gt;Internet accessible on-demand information and an easy to use internet shop&lt;/strong&gt;&lt;/h6&gt;&lt;/li&gt;
                &lt;li &gt;&lt;h6&gt;&lt;strong&gt;Extensive and flexible repair capabilities at any location&lt;/strong&gt;&lt;/h6&gt;&lt;/li&gt;
                &lt;li &gt;&lt;h6&gt;&lt;strong&gt;Full Service Contracts&lt;/strong&gt;&lt;/h6&gt;&lt;/li&gt;
                &lt;li &gt;&lt;h6&gt;&lt;strong&gt;Maintenance Contracts&lt;/strong&gt;&lt;/h6&gt;&lt;/li&gt;
            &lt;/ul&gt;
    &lt;!-- repeater1 ends --&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;a&gt;&lt;span id="imgDownArrow_0" class="glyphicon glyphicon-chevron-right " runat="server"&gt; MoreInformation&lt;/span&gt;&lt;/a&gt;
&lt;div id="parent" class="dataContentSectionMessages" style="display:none"&gt;
    &lt;!-- repeater1 starts --&gt;
        &lt;!-- &lt;sc:text field="Event Description" runat="server" item="&lt;%#Container.DataItem %&gt;" /&gt; --&gt;
            &lt;ul  &gt;
                &lt;li &gt;&lt;h6&gt;&lt;strong&gt;lorem&lt;/strong&gt;&lt;/h6&gt;&lt;/li&gt;
                &lt;li &gt;&lt;h6&gt;&lt;strong&gt;An assigned contact who knows you and your lorem analysis system&lt;/strong&gt;&lt;/h6&gt;&lt;/li&gt;
                &lt;li &gt;&lt;h6&gt;&lt;strong&gt;Internet accessible on-demand information and an easy to use internet shop&lt;/strong&gt;&lt;/h6&gt;&lt;/li&gt;
                &lt;li &gt;&lt;h6&gt;&lt;strong&gt;Extensive and flexible repair capabilities at any location&lt;/strong&gt;&lt;/h6&gt;&lt;/li&gt;
                &lt;li &gt;&lt;h6&gt;&lt;strong&gt;Full Service Contracts&lt;/strong&gt;&lt;/h6&gt;&lt;/li&gt;
                &lt;li &gt;&lt;h6&gt;&lt;strong&gt;Maintenance Contracts&lt;/strong&gt;&lt;/h6&gt;&lt;/li&gt;
            &lt;/ul&gt;
    &lt;!-- repeater1 ends --&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;a&gt;&lt;span id="imgDownArrow_0" class="glyphicon glyphicon-chevron-right " runat="server"&gt; MoreInformation&lt;/span&gt;&lt;/a&gt;
&lt;div id="parent" class="dataContentSectionMessages" style="display:none"&gt;
    &lt;!-- repeater1 starts --&gt;
        &lt;!-- &lt;sc:text field="Event Description" runat="server" item="&lt;%#Container.DataItem %&gt;" /&gt; --&gt;
            &lt;ul  &gt;
                &lt;li &gt;&lt;h6&gt;&lt;strong&gt;lorem&lt;/strong&gt;&lt;/h6&gt;&lt;/li&gt;
                &lt;li &gt;&lt;h6&gt;&lt;strong&gt;An assigned contact who knows you and your lorem analysis system&lt;/strong&gt;&lt;/h6&gt;&lt;/li&gt;
                &lt;li &gt;&lt;h6&gt;&lt;strong&gt;Internet accessible on-demand information and an easy to use internet shop&lt;/strong&gt;&lt;/h6&gt;&lt;/li&gt;
                &lt;li &gt;&lt;h6&gt;&lt;strong&gt;Extensive and flexible repair capabilities at any location&lt;/strong&gt;&lt;/h6&gt;&lt;/li&gt;
                &lt;li &gt;&lt;h6&gt;&lt;strong&gt;Full Service Contracts&lt;/strong&gt;&lt;/h6&gt;&lt;/li&gt;
                &lt;li &gt;&lt;h6&gt;&lt;strong&gt;Maintenance Contracts&lt;/strong&gt;&lt;/h6&gt;&lt;/li&gt;
            &lt;/ul&gt;
    &lt;!-- repeater1 ends --&gt;
&lt;/div&gt;
&lt;/div&gt;




&lt;/asp:Repeater&gt;


&lt;/body&gt;
&lt;!-- Predefined JavaScript --&gt;
&lt;script src="jquery.js"&gt;&lt;/script&gt;
&lt;script src="bootstrap.js"&gt;&lt;/script&gt;

&lt;script&gt;

 $(function () {
        $('a').click(function() {
            $(this).parent().children('.dataContentSectionMessages').slideToggle();
        });
    });

    &lt;/script&gt;


&lt;/html&gt;
</code></pre>


blocks|key|1445914|text|正如问题所问的，不是jQuery，而是本机的(即不需要库)，我认为更好的工作工具是querySelector，它可以获取选择器的单个实例：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1445915|let+el+=+document.querySelector('img');
console.log(el);|code-block|syntax|javascript|1445916|对于所有匹配的实例，请使用document.querySelectorAll()，或者对于其他元素中的实例，可以按如下方式链接：|1445917|//+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');|1445918|注意，上面的代码等同于：|1445919|let+childrenEls+=+document.querySelector('.parentClassName').querySelectorAll('img');|1445920|entityMap^0|A|6|15|D|0|0|D|R|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|13|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|14|8|@]|D|@]|E|$]]|$1|Q|3|R|5|H|7|15|8|@]|D|@]|E|$I|J]]|$1|S|3|-4|5|6|7|16|8|@]|D|@]|E|$]]]|T|$]]

<p>Not <code>jQuery</code>, as the question asks for, but natively (i.e., no libraries required) I think the better tool for the job is <code>querySelector</code> to get a single instance of a selector:</p>
<pre><code>let el = document.querySelector('img');
console.log(el);
</code></pre>
<p>For all matching instances, use <code>document.querySelectorAll()</code>, or for those within another element you can chain as follows:</p>
<pre><code>// Get some wrapper, with class=&quot;parentClassName&quot;
let parentEl = document.querySelector('.parentClassName');
// Get all img tags within the parent element by parentEl variable
let childrenEls = parentEl.querySelectorAll('img');
</code></pre>
<p>Note the above is equivalent to:</p>
<pre><code>let childrenEls = document.querySelector('.parentClassName').querySelectorAll('img');
</code></pre>


blocks|key|1231059|text|你可以只使用CSS+selector和jQuery来定位第一个子元素：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1231060|$(this).children('img:nth-child(1)');|code-block|syntax|javascript|1231061|如果您想要针对第二个子元素，只需将1改为2：|1231062|$(this).children('img:nth-child(2)');|1231063|以此类推..|1231064|如果你想定位更多的元素，你可以使用for循环：|1231065|for+(i+=+1;+i+<=+$(this).children().length;+i%2B%2B)+{
++++let+childImg+=++$(this).children("img:nth-child("%2B+i+%2B")");
++++//+Do+stuff...
}|1231066|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>You can target the first child element with just using CSS selector with jQuery:</p>
<pre><code>$(this).children('img:nth-child(1)');
</code></pre>
<p>If you want to target the second child element just change 1 to 2:</p>
<pre><code>$(this).children('img:nth-child(2)');
</code></pre>
<p>and so on..</p>
<p>if you want to target more elements, you can use a for loop:</p>
<pre><code>for (i = 1; i &lt;= $(this).children().length; i++) {
    let childImg =  $(this).children(&quot;img:nth-child(&quot;+ i +&quot;)&quot;);
    // Do stuff...
}
</code></pre>


<p>Using jQuery how do I select a single child element? I've looked at the Traversing API and know I can select all the immediate children <code>img</code> elements like this:</p>

<pre><code>$(this).children('img');
</code></pre>

<p>And to select the first child <code>img</code> element I could use a subscript like this:</p>

<pre><code>$(this).children('img')[0];
</code></pre>

<p>But I guess I'm kind of surprised I can't do this:</p>

<pre><code>$(this).child('img'); // no subscript, returns single element
</code></pre>

<p>Or have I missed something?</p>


How to select a single child element using jQuery?

如何使用jQuery选择单个子元素？我看过Traversing API，知道我可以选择所有直接的子img元素，如下所示：$(this).children('img');为了选择第一个子img元素，我可以使用下面这样的下标：$(this).children('img')[0];但我想我有点惊讶我不能这么做：$(this)...

问如何使用jQuery选择单个子元素？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用jQuery选择单个子元素？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用jQuery选择单个子元素？
EN