Menu
Community /Pin to ProfileBookmarkGet the nearest
@cootheadDec 10.2021 — #Hi there pstein,
bearing in mind that it is not permissible for the
[b]p element[/b] to contain [b]block element[/b] this is one
possible solution...
The [b]p element[/b] would be ignored as the
[b]great grandparent[/b] of the [b]img element[/b]
and should be removed or replaced with
something more appropriate.
[i]coothead[/i]
@daveyerwinDec 10.2021 — #
Get the nearest parent containing an child with class “sample”? jQuery
Assume I have the following simplified code:
“`
<div> “1”
<div> “2”
<p>
<div> “3”
<span>
<img class=”sample”>…</img>
</span>
</div>
</p>
</div>
</div>
Now I want to refer to innermost parent <div> element which contains a child element with class “sample”.
Here it is an <img> element in other cases it could be a <figure> or whatever.
As target <div> element I would like to get the <div> labelled here with “3”.
How can I achieve this?
If possible as jQuery statement.
Thank you
Sign in
to post a comment3 Comments(s) ↴
0
@cootheadDec 10.2021 — #Hi there pstein,bearing in mind that it is not permissible for the
[b]p element[/b] to contain [b]block element[/b] this is one
possible solution...
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>Untitled document</title>
<!--
The internal CSS should be transferred to an external file
<link rel="stylesheet" href="screen.css" media="screen">
-->
<style media="screen">
body {
background-color: #f0f0f0;
font: normal 1em / 1.5em sans-serif;
}
div, p, span {
padding: 1em;
margin: 1em;
border: 1px solid #000;
}
p{
border-color: #f00;
}
span{
display: inline-block;
border-color: #00f;
}
img {
background-color: #f0f;
}
</style>
</head>
<body>
<div> "1"
<div> "2"
<p>
<div> "3" <!-- This is not a permissible child of a p element -->
<span>
<img class="sample" src="some.png" alt="some">
</span>
</div>
</p>
</div>
</div>
<script>
(function(d) {
'use strict';
var img = d.querySelector('img[class="sample"]'),
div = img.parentNode.parentNode;
<i> </i> console.log( div.textContent );
<i> </i>
}(document));
</script>
</body>
</html>
The [b]p element[/b] would be ignored as the
[b]great grandparent[/b] of the [b]img element[/b]
and should be removed or replaced with
something more appropriate.
[i]coothead[/i]
0
@daveyerwinDec 10.2021 — #>@pstein#1640391 If possible as jQuery statement.
``<i>
</i><div> "1"
<div> "2"
<p>
<div> "3"
<span>
<img class="sample">
</span>
</div>
</p>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>
var a=$('.sample').parent();
while(a.prop('tagName')!='DIV')a=a.parent();
a.css("color", "red");
</script><i>
</i>``about: ({
version: 0.1.9 — BETA 5.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});
legal: ({
terms: of use,
privacy: policy
});
version: 0.1.9 — BETA 5.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});
legal: ({
terms: of use,
privacy: policy
});
↴changelog: (
version: 0.1.9,
notes: added community page
version: 0.1.8,
notes: added Davinci•003
version: 0.1.7,
notes: upvote answers to bounties
version: 0.1.6,
notes: article editor refresh
)...
version: 0.1.9,
notes: added community page
version: 0.1.8,
notes: added Davinci•003
version: 0.1.7,
notes: upvote answers to bounties
version: 0.1.6,
notes: article editor refresh
)...
↴recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,
tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,
tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...