javascript - 选择类中的第一个子元素

Question

我正在尝试选择某些 HTML 元素以从 HTML 文档中提取文本。

这是一个 fiddle链接。

有没有办法只选择第一个 <p>在这种情况下来自特定 div 的元素？

我只想要 <p>出现在链接之前的元素(每个父 div 之后的第一个元素)，所以只有 Family Service of Middletown和 Freestore Food Bank会是红色的。

我知道为什么 jQuery :first-child不工作(因为嵌套的 div)，但我不确定是否有解决方法。

$("p:first-child").css("color", "red");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="Body_right_column_C013_AgenciesRepeater_AgencyWrapper_60" class="agency income" data-display="closed">
                <p class="agency-title">Family Service of Middletown</p>
                <a href="http://www.fsmiddletown.org" id="Body_right_column_C013_AgenciesRepeater_AgencyLink_60" class="agency-link" target="_blank">Visit Site</a>
                <div class="close-button"></div>
                <div class="programs">
                    
                            <div id="Body_right_column_C013_AgenciesRepeater_ProgramsRepeater_60_ProgramWrapper_0" class="program income">
			                    <div class="program-name">
				                    <p class="program-title">Program</p>
				                    <p class="program-description">Emergency Assistance (FSM)</p>
			                    </div>
			                    <div class="program-allocation">
				                    <p>Investment</p>
				                    <p class="amount-allocated">$130,000.00 </p>
			                    </div>
			                    <div class="program-impact">
				                    <p>Impact Area</p>
                                    <p class="impact-description">Families/Individuals achieve sustained employment</p>
			                    </div>
			                    <div class="program-region">
				                    <p class="region-title">Region</p>
				                    <p class="region-area">Middletown Area</p>
			                    </div>
		                    </div>
                        
                </div>
            </div>


<div id="Body_right_column_C013_AgenciesRepeater_AgencyWrapper_61" class="agency income" data-display="closed">
                <p class="agency-title">Freestore Foodbank</p>
                <a href="http://www.freestorefoodbank.org" id="Body_right_column_C013_AgenciesRepeater_AgencyLink_61" class="agency-link" target="_blank">Visit Site</a>
                <div class="close-button"></div>
                <div class="programs">
                    
                            <div id="Body_right_column_C013_AgenciesRepeater_ProgramsRepeater_61_ProgramWrapper_0" class="program income">
			                    <div class="program-name">
				                    <p class="program-title">Program</p>
				                    <p class="program-description">Power Pack - Newport KY</p>
			                    </div>
			                    <div class="program-allocation">
				                    <p>Investment</p>
				                    <p class="amount-allocated">$28,112.00 </p>
			                    </div>
			                    <div class="program-impact">
				                    <p>Impact Area</p>
                                    <p class="impact-description">Families/Individuals achieve sustained employment</p>
			                    </div>
			                    <div class="program-region">
				                    <p class="region-title">Region</p>
				                    <p class="region-area">Northern Kentucky</p>
			                    </div>
		                    </div>
                        
                            <div id="Body_right_column_C013_AgenciesRepeater_ProgramsRepeater_61_ProgramWrapper_1" class="program income">
			                    <div class="program-name">
				                    <p class="program-title">Program</p>
				                    <p class="program-description">Client Services Project</p>
			                    </div>
			                    <div class="program-allocation">
				                    <p>Investment</p>
				                    <p class="amount-allocated">$344,692.00 </p>
			                    </div>
			                    <div class="program-impact">
				                    <p>Impact Area</p>
                                    <p class="impact-description">Families/Individuals achieve sustained employment</p>
			                    </div>
			                    <div class="program-region">
				                    <p class="region-title">Region</p>
				                    <p class="region-area">Regional Center</p>
			                    </div>
		                    </div>
                        
                            <div id="Body_right_column_C013_AgenciesRepeater_ProgramsRepeater_61_ProgramWrapper_2" class="program income">
			                    <div class="program-name">
				                    <p class="program-title">Program</p>
				                    <p class="program-description">Cincinnati Cooks!</p>
			                    </div>
			                    <div class="program-allocation">
				                    <p>Investment</p>
				                    <p class="amount-allocated">$39,156.00 </p>
			                    </div>
			                    <div class="program-impact">
				                    <p>Impact Area</p>
                                    <p class="impact-description">Families/Individuals achieve sustained employment</p>
			                    </div>
			                    <div class="program-region">
				                    <p class="region-title">Region</p>
				                    <p class="region-area">Regional Center</p>
			                    </div>
		                    </div>
                        
                </div>
            </div>

Answer 1

您可以使用 filter() .

I only want the <p> elements that occur just before the links

通过将函数传递给 filter() , 我们可以使用 .next() 遍历到下一个兄弟。因为我们通过了 a选择器，如果下一个元素是 anchor ，则返回对象的长度将为1:

$("p").hide().filter(function () {
    return $(this).next('a').length;
}).css("color", "red").show();

JSFiddle

---

对于您的特定场景，由于您的元素具有相关类，您可以使用它们进行过滤:

$("p").hide().filter('.agency-title').css("color", "red").show();

JSFiddle