使用JQuery将内容添加到DOM

我试图在每个<article>元素中的第二个<p>之后添加一个<h2>元素。有人可以解释为什么article p:nth-child(3)有效吗？乍一看，我会认为这个语法指向每个<article>中的第三个<p>。另外，是否有更有效的方法来做到这一点？试图更好地理解JQuery。谢谢。使用JQuery将内容添加到DOM

(function(){ 
 
     $('<h2></h2>', { 
 
     text: 'hello', 
 
     class: 'million' 
 
     }).insertAfter('article p:nth-child(3)'); 
 
    })();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Document</title> 
 
</head> 
 
<body> 
 
    <article> 
 
    <h1>My Awsome Post</h1> 
 
    <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
 
     tempor incididunt ut labore et dolore magna aliqua. 
 
    </p> 
 
    <p> 
 
     Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
     consequat 
 
    </p> 
 
    <p> 
 
     Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
     consequat 
 
    </p> 
 
    </article> 
 
    <article> 
 
    <h1>My Awsome Post</h1> 
 
    <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
 
     tempor incididunt ut labore et dolore magna aliqua. 
 
    </p> 
 
    <p> 
 
     Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
     consequat 
 
    </p> 
 
    <p> 
 
     Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
     consequat 
 
    </p> 
 
    </article> 
 
    
 
</body> 
 
</html>

来源

2015-09-06 web-dev

见http://api.jquery.com/nth-child-selector/ – guest271314

nth-child将在n位置选择父的子元素，不管其他的子标签是什么。

你只是简单地限制它也匹配p标签，换句话说，选择每个article这是一个p标签的第三个孩子。因为在每篇文章的开头你有一个h1，所以第三个孩子成为第二个p。

如果你想在第二p标签，那么你可以使用选择 - p:nth-of-type(2)。至于这个选择上MDN文档说：

这是一个更加灵活和实用的伪选择[比第n个孩子。如果你想确保你无论选择同一类型的标签它在哪里在父元素内部，或者其他不同的标签出现在它之前。

这应该做你需要的东西：

(function(){ 
 
     $('<h2></h2>', { 
 
     text: 'hello', 
 
     class: 'million' 
 
     }).insertAfter('article p:nth-of-type(2)'); 
 
    })();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Document</title> 
 
</head> 
 
<body> 
 
    <article> 
 
    <h1>My Awsome Post</h1> 
 
    <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
 
     tempor incididunt ut labore et dolore magna aliqua. 
 
    </p> 
 
    <p> 
 
     Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
     consequat 
 
    </p> 
 
    <p> 
 
     Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
     consequat 
 
    </p> 
 
    </article> 
 
    <article> 
 
    <h1>My Awsome Post</h1> 
 
    <h2>Some sub-heading to increase the number of other children</h2> 
 
    <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
 
     tempor incididunt ut labore et dolore magna aliqua. 
 
    </p> 
 
    <p> 
 
     Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
     consequat 
 
    </p> 
 
    <p> 
 
     Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
     consequat 
 
    </p> 
 
    </article> 
 
    
 
</body> 
 
</html>

来源

2015-09-06 19:23:24 Rhumborl

谢谢。很好的解释 –

使用JQuery将内容添加到DOM

回答

相关问题