Mark C.
Reputation: 6450
Select first child element within a class
I am trying to select certain HTML elements to extract the text from an HTML document.
Here's a fiddle link.
Is there a way to select only the first <p> element from specific divs in this scenario?
I only want the <p> elements that occur just before the links (first element after each of the parent divs), so only Family Service of Middletown and Freestore Food Bank would be red.
I know why the jQuery :first-child isn't working (because of the nested divs), but I'm not sure if there's a work-around.
$("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>Upvotes: 0
Views: 108
Answers (4)
six fingered man
Reputation: 2500
Here's a nice short way to do it:
$("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>The "p + a" selects all a elements that have a p sibling directly before them. Then we just call .prev() to get back to the p.
And if you wanted to hide the other p elements, then do this:
$("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>It looks a little strange, but here's how it works:
$("p").hide()Hide allpelements.next("a")Select the next sibling of eachp, but only if it's anaelement.prev()Now go back to thep, and it will be only the ones that had anasibling.show().css("color", "red")Then show and color those remainingpelements
Upvotes: 1
George
Reputation: 36784
You can use filter().
I only want the
<p>elements that occur just before the links
By passing a function to filter(), we can use .next() to traverse to the next sibling. Because we pass the a selector, if the next element is an anchor, the length of the object returned will be 1:
$("p").hide().filter(function () {
return $(this).next('a').length;
}).css("color", "red").show();
For your specific scenario, since your elements have relevant classes, you can filter using them:
$("p").hide().filter('.agency-title').css("color", "red").show();
Upvotes: 3
Niffler
Reputation: 1710
Use .first() instead of .first-child():
$("div[id*='Body_right_column_C013_AgenciesRepeater_AgencyWrapper_']").find('p:first').css("color", "red");
Here's a fiddle: http://jsfiddle.net/Niffler/euhg8bwr/
Upvotes: 1
Alex Char
Reputation: 33218
One simple solution is to use 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>Also you can be more specific in selector and be like:
$("div.agency a").prev().css("color", "red");
Upvotes: 3
Related Questions
- Select first child element with specific class
- How to select the first element on a page using a particular class when each subsequent element using the same class is also a first child?
- select first element with specific css class
- How to select only the first element after class?
- Select first child of class in different parents
- How do I select the first child of a parent element?
- jquery select first child with class of a parent with class
- Selecting first elements of a class children of elements of another class in jQuery
- selecting the 1st element in a series of elements with class attribute
- How can I select first element from each of child elements