Suppose I have a block of code that looks like this.
<div class="lv1">
<div class="lv2">
<div class="img">
</div>
<div id="text-on-image"> // <-- I want to grab this div element.
</div>
</div>
<div class="lv2">
</div>
</div>
Now I have $(this).eq(0) which refers to the root div element.
<div class="lv1"> //<-- $(this).eq(0) is here.
<div class="lv2">
<div class="img">
</div>
<div id="text-on-image">
</div>
</div>
<div class="lv2">
</div>
</div>
$(this).eq(0).children().eq(0) now refers to first div of lv2 class div.
<div class="lv1">
<div class="lv2"> // <-- $(this).eq(0).children().eq(0) is here
<div class="img">
</div>
<div id="text-on-image">
</div>
</div>
<div class="lv2">
</div>
</div>
$(this).eq(0).children().eq(0).children().eq(1) now refers to the correct div I want.
<div class="lv1">
<div class="lv2">
<div class="img">
</div>
<div id="text-on-image"> // <-- $(this).eq(0).children().eq(0).children().eq(1) is here
</div>
</div>
<div class="lv2">
</div>
</div>
Notice how the selecting child node became very messy for my code.
"$(this).eq(0).children().eq(0).children().eq(1)"
Is there a better way to go about doing the same work?
Use:
$("#parent").find(".children") for all children (deep traverse)
or:
$("#parent").children(".children") for immediate children
Since you use an ID, and an ID must be unique - simply use $("#text-on-image")
Otherwise, use the .find() Method.
If you used id, you can select it right away.
$("#text-on-image")
id must be unique, so if you use class, you can use ".find()"
$(".lv1").find(".text-on-image")
If no id or class is specified, selectors can be used.
$(".lv1 > .lv2 > div:nth-child(2)")
Related
I have the following situations:
<div class="content">
<div class="background">
...
</div>
</div>
<div class="indicators"></div>
<div class="overlay">...</div>
<div class="border speaking">
<div class="content">
<div class="background">
...
</div>
</div>
<div class="indicators"></div>
<div class="overlay">...</div>
<div class="border">
I would like to select the background div in the former example, but not the latter. The only difference between the two is the presence of the speaking class on the final div.
I tried .content:not( ~ .border:not(.speaking) ) > .background, but this did not work. I am on Firefox Developer Edition, and as such do not currently have access to :has.
Thanks in advance!
I'm changing a database using phpmyadmin with several html pages inside it and I would like to remove, from all these pages, all the <div> and other tags that contain a certain class or id.
Example:
Case 1
<div class="undesirable">
<div class="container">
<div class="row">
<div class="col1"></div>
</div>
</div>
</div>
Case 2
<div class="undesirable">
<div class="container">
<div class="row">
<div class="col1"></div>
<div class="col2"></div>
</div>
</div>
</div>
i would like to remove all <div> that contain the class="undesirable". In some cases, there is still the possibility of appearing as class="pre_undesirable", or something similar.
Initially I thought of using regex, but as there are variations in htmls, code breaks are occurring, as there is no way to know when the <\div> will end.
Possibly the answer would be HTML parser, but I can't understand how to use it. Any indication of where to start?
Since you are dealing with html, you probably should use an html parser and search for the removal target using xpath. To demonstrate, I'll change your html a bit:
$original=
'<html><body>
<div class="undesirable">
<div class="container">
<div class="row">
<div class="col1"></div>
</div>
</div>
</div>
<div class="keepme">
<div class="container">
<div class="row">
<div class="col1"></div>
<div class="col2"></div>
</div>
</div>
</div>
<div class="pre_undesirable">
<div class="container">
<div class="row">
<div class="col1"></div>
<div class="col2"></div>
</div>
</div>
</div>
<div class="keepme">
<div class="container">
<div class="row">
<div class="col1"></div>
<div class="col2"></div>
</div>
</div>
</div>
</body>
</html>
';
$HTMLDoc = new DOMDocument();
$HTMLDoc->loadHTML($original);
$xpath = new DOMXPath($HTMLDoc);
$targets = $xpath->query('//div[contains(#class,"undesirable")]');
foreach($targets as $target){
$target->parentNode->removeChild($target);
}
echo $HTMLDoc->saveHTML();
The output should include only the two "keep me" <div>s.
We can make use D3JS to remove or append any the HTML elements by class name or id.
We can make use of Select() and Selectall() for the selection of the particular elements in the HTML. Incase if we want to append any div tag use append('div') to insert the div for the data.
<script>
function remove()
{
d3.select(.undesirable)
.selectAll("li")
.exit()
.remove()
}
</script>
Is it a good idea to use ID in a bootstrap .col which is in a .row? I read somewhere that you should only have columns under .row . Example:
<div class="container">
<div class="row">
<div id="style1" class="col-12">
</div>
<div id="style2" class="col-12">
</div>
</div>
</div>
or should I make seperate div tags:
<div class="container">
<div class="row">
<div class="col-12">
<div id="style1">
</div>
</div>
<div class="col-12">
<div id="style2">
</div>
</div>
</div>
</div>
It doesn't really matter: The reason why you shouldn't you use an ID for a particular element usually is that you would like to use the CSS applied to that ID more than once: In this case you should use a class instead of an ID.
But if you are sure you will use those settings only once (or if you don't use any CSS for that ID but only want to be able to address that one element via Javascript/jQuery), you can use an ID.
I would like to select only the p tag without any attributes from the following html code.
<div id="review">
<div class="partial_review">
<div class="1">.....</div>
<div class="2">
<div class='inner_Bubble'>
<div class="entry">
<p class="partial_entry>it was a good...</p>
</div>
</div>
</div>
</div>
<div class="full_review">
<div class="1">.....</div>
<div class="2">
<div class='inner_Bubble'>
<div class="entry">
<p>it was a good trip.</p>
</div>
</div>
</div>
</div>
</div>
I have tried //div[#class='entry']/p[not class = 'partial_entry']/text(). But, its not working.
If you want all p elements with no attributes at all then the simplest path would be
//p[not(#*)]
If you want to check for the absence of class specifically then
//p[not(#class)]
I need to target each last <div> before each <h3>. Is there a programatic way this can be done in css?
For other reasons, I can not / don't want to target <h3> instead.
<div id="main">
<h3>Title</h3>
<div class="post">…</div>
<div class="post"><!-- Target this div--></div>
<h3>Title</h3>
<div class="post">…</div>
<div class="post">…</div>
<div class="post">…</div>
<div class="post"><!-- Target this div--></div>
<h3>Title</h3>
<div class="post">…</div>
<div class="post">…</div>
<div class="post"><!-- Target this div--></div>
</div>
Actually this isn't possible.
If you are able to wrap the blocks into parent tags you can get each last child by CSS selectors #main .post:last-child:
<div id="main">
<div> <!-- wrap with "h3" WORKS -->
<h3>Title</h3>
<div class="post">…</div>
<div class="post"><!-- Target this div--></div>
</div>
<h3>Title</h3>
<div> <!-- wrap without "h3" also WORKS -->
<div class="post">…</div>
<div class="post">…</div>
<div class="post"><!-- Target this div--></div>
</div>
</div>
Note: The :last-child selector is not supported in IE8 and earlier versions.
What do you mean with: "For other reasons, I can not / don't want to target instead."?
jQuery workaround will work exactly like you want it with your original markup:
var $Main = jQuery('#main');
$Main.find('h3').prev().add( $Main.find(':last') ) //.text('<!-- Target this div-->');
At some point in the future, when selectors level 4 are implemented:
#main div:not(:has(+ div))