简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > JS Tutorial > body text

jquery: Why is the first-child selector invalid in this case?

黄舟
Release： 2017-06-23 14:32:40
Original
1691 people have browsed it

Why does the first-child in jQuery fail to take effect if there is an additional h2 tag? See picture below. Thank you

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js">
</script>
<script type="text/javascript"> $(document).ready(function(){
$(&#39;div p:first-child&#39;).css(&#39;backgroundColor&#39;, &#39;#555&#39;);
});
</script>	
</head>
<body>
<html>
<div>
    <h2>hello</h2>
    <p>A</p>
    <p>B</p>
    <p>C</p>
    </div>
    <div>
    <p>D</p>
    <p>E</p>
    <p>F</p></div>
    <div>
    <p>G</p>
    <p>H</p>
    <p>I</p>
    </div>
    </body>
    </html>
Copy after login

jquery: Why is the first-child selector invalid in this case?

first-child will only traverse to the first child element

Because there is no first and p in the first div Element 

$("div > p").first()
Copy after login

but the p tag is selected, not h2? 

$("div > p").first()
Copy after login

No. Only A has an effect, D and G have no effect. 

nth-of-type
Copy after login

The above is the detailed content of jquery: Why is the first-child selector invalid in this case?. For more information, please follow other related articles on the PHP Chinese website!

Related labels：
jquery Why Selector
source：php.cn
Previous article：jQuery: Problems with using the first-child selector Next article：The difference between jQuery :first selector, :first-child selector and first()
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Creating this specific design using a grid: a step-by-step guide I'm trying to create a layout similar to this image, I've tried using this grid but can't ...
From 2024-04-06 20:29:08
0
2
492
Select woocommerce related products using custom taxonomy with 3 level hierarchy I have a woocommerce store with a custom classification of "Sports". The classif...
From 2024-04-06 20:05:30
0
1
544
How to use CSS selectors to target div elements containing specific attributes or tags? I'm working on a POS system that generates a website. Most of the code is proprietary so I...
From 2024-04-03 22:25:59
0
1
277
How to check if radio button group is required I have a dynamic radio button group where the required attribute may not be specified on a...
From 2024-04-03 16:23:29
0
1
306
PHP: Handling (unexpected) arrays in user input I've recently discovered that sending variables containing "unexpected" arrays (...
From 2024-04-01 17:56:37
0
1
396
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！