使用jQuery从同域页面加载指定HTML元素的问题及解决方法

问题场景 #

我尝试用jQuery从同域的另一页面中获取特定元素，但最初找到的代码无法生效。

目标页面（mysampleurl.com/postpageslist）的HTML结构 #

<html>
<div class="postoutercontainer">
    <div class="postouter">
        <div class="post">
            <div class="postTITLE">
                <a href="#samplepost">POST1</a>
            </div>
        </div>
    </div>
</div>

<div class="postoutercontainer">
    <div class="postouter">
        <div class="post">
            <div class="postTITLE">
                <a href="#samplepost">POST2</a>
            </div>
        </div>
    </div>
</div>

<div class="postoutercontainer">
    <div class="postouter">
        <div class="post">
            <div class="postTITLE">
                <a href="#samplepost">POST3</a>
            </div>
        </div>
    </div>
</div>

<div class="postoutercontainer">
    <div class="postouter">
        <div class="post">
            <div class="postTITLE">
                <a href="#samplepost">POST4</a>
            </div>
        </div>
    </div>
</div>

<div class="postoutercontainer">
    <div class="postouter">
        <div class="post">
            <div class="postTITLE">
                <a href="#samplepost">POST5</a>
            </div>
        </div>
    </div>
</div>
</html>

初始尝试的无效代码（mysampleurl.com/targetpage） #

<div id="samplediv">
    
</div>
<script>
  $('#samplediv').load('/postpageslist .postoutercontainer p:lt(POST3)');
</script>

解决方法 #

初始代码失效的原因：

• 目标页面中不存在<p>元素，选择器里的p匹配不到任何内容
• :lt()选择器是按元素索引（数字）进行筛选，不能直接传入文本值POST3

改用:contains()选择器，它可以匹配包含指定文本的元素，最终可行代码如下：

$('#samplediv').load('/postpageslist .postoutercontainer:contains(POST3)');

内容的提问来源于stack exchange，提问作者terdexx pogi