我正在尝试选择某些HTML元素来从HTML文档中提取文本。
这是一个fiddle链接。
在这种情况下，是否有办法从特定div中仅选择第一个<p>元素？
我只想要在链接之前出现的<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>
答案 0 :(得分：3)
您可以使用filter()。
我只想要在链接
之前出现的<p>元素
通过将函数传递给filter()，我们可以使用.next()遍历下一个兄弟。因为我们传递a选择器，如果下一个元素是锚，则返回的对象的长度将为1：
$("p").hide().filter(function () {
return $(this).next('a').length;
}).css("color", "red").show();
对于您的特定场景，由于您的元素具有相关的类，您可以使用它们进行过滤：
$("p").hide().filter('.agency-title').css("color", "red").show();
答案 1 :(得分：3)
一个简单的解决方案是使用jquery .prev()：
$("a").prev().css("color", "red");<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/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>
此外，您可以在选择器中更具体，如：
$("div.agency a").prev().css("color", "red");
答案 2 :(得分：1)
这是一个很好的简短方法：
$("p + a").prev().css("color", "red");
$("p + a").prev().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>
"p + a"选择所有a个元素，这些元素在它们之前直接有p个兄弟元素。然后，我们只需致电.prev()即可返回p。
如果您想要隐藏其他p元素，请执行以下操作：
$("p").hide().next("a").prev().show().css("color", "red");
$("p").hide().next("a").prev().show().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>
看起来有点奇怪，但这是它的工作原理：
$("p").hide()隐藏所有p元素
.next("a")选择每个p的下一个兄弟，但前提是它是a元素
.prev()现在返回p，只有a兄弟
.show().css("color", "red")然后显示并着色剩余的p元素
答案 3 :(得分：1)
使用.first()代替.first-child()：
$("div[id*='Body_right_column_C013_AgenciesRepeater_AgencyWrapper_']").find('p:first').css("color", "red");