I have this:
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-6">
</div>
<div class="col-md-8">
</div>
<div class="col-md-12">
</div>
<div class="A">
</div>
<div class="B">
</div>
</div>
I want to select children of row class whose classes are col-md-4,6,8,12. Is there any good way to select all at once?
There can be multiple row divs and I am going to use wrapAll to wrap every row div's children in some other div. So if I use wrapAll, it just shifts all content of other row divs to the first row div. If I put the selector query inside loop, it just keeps wrapping the children times the number of row divs. I don't want to let this happen.
Are you understanding guys?
if You have other child elements with col-md-* and you do not want to target them. Then can use descendant child selector or .find():
$('.row .col-md-4,.row .col-md-6 ')
or
$('.row').find('.col-md-4,.col-md-6,.col-md-8,.col-md-12')
Otherwise you can use attribute contains selector:
$('.row [class*="col-md-"]')
Yeah you can use native 'querySelectorAll' function.
Like that :
document.querySelectorAll('.row [class*="col-md"]')
[class*="col-md"] means "All classes containing 'col-md"
A non-javascript solution
Try selecting them with the ^ or with the * selector. For example like:
[class^="col-md-"] {}
That will select elements with a class that starts with col-md-, thus, making the number at the end irrelevant.
or
[class*="col-md-"] {}
That will select elements with a class that contain col-md-.
Here's what the MDN says:
[attr^=value]
Represents an element with an attribute name of attr the
value of which is prefixed by "value".
[attr*=value]
Represents an element with an attribute name of attr the value of which contains at least one occurrence of string "value" as substring.
Demo:
.row [class^="col-md-"] {
color: red;
}
<div class="row">
<div class="col-md-4">
foo bar
</div>
<div class="col-md-6">
foo bar
</div>
<div class="col-md-8">
foo bar
</div>
<div class="col-md-12">
foo bar
</div>
<div class="A">
foo bar
</div>
<div class="B">
foo bar
</div>
</div>
$('.row>[class|="col-md"]')
.row is a class selector
> is a children selector
[] is a attribute selector
|= means prefix is
The code means that select the children of those with class "row", whose value of attribute class have a prefix "col-md".
Note1: according to the recommended rules, the value part of the attribute select (no matter it is a equals relation, prefix equals or other kinds of equals), the part after =, should be a string. Since the select has already been a string in '', you need to use "" to describe a string.
But if you use "" make the selector string, inside you need to use '' as a string.
Note 2: I just tried |="col-md-" but it does not work.
Related
I want to execute JavaScript that finds all elements on a page that contains some text in it's class name and change the class names.
For example, let's say I have the following elements:
<div class="blue selector">...</div>
<div class="green selector">...</div>
<div class="red selector">...</div>
<div class="button">...</div>
Let's say I want to find all the elements that contain the word "selector" in their class names and change the class names of that element to "picker", so that I finally have:
<div class="picker">...</div>
<div class="picker">...</div>
<div class="picker">...</div>
<div class="button">...</div>
What JavaScript can I execute on the page to get this result?
You can use Substring matching attribute selectors and change the class name of elements.
document.querySelectorAll('div[class*="selector"]').forEach(node=> node.className = "picker");
In JavaScript I want to use document.querySelector to "grab" the last div (<div class="widget-footer">) in below HTML. However after many tries, I still can't figure out the correct CSS selector syntax to use.
The following code does not work:
document.querySelector (".skin-grid-widgets.ui-sortable.gridWidgetTemplatePositie.AgendaStandaard.disablesorting.hoogte-1-knoppen-0.breedte-1.widget-footer")
Here is the HTML I am working with
<div class="skin-grid enkeleKolom" id="Infobalk">
<div class="skin-grid-widgets ui-sortable">
<div class="gridWidgetTemplatePositie AgendaStandaard disablesorting hoogte-1-knoppen-0 breedte-1">
<div class="widget-header">
here comes the header text
</div>
<div class="widget-body">
some body text
</div>
<div class="widget-footer">
here comes the footer text
</div>
</div>
</div>
</div>
I've surfed everywhere to find example of complex CSS selectors used with querySelector, but to no avail. Any help would be really appreciated.
Your issue is you need a space in between each child element you are trying to select. If you do not have spaces in between your class selectors, by CSS specification, it will look for both classes on the same element.
Change your selector to look like the following:
var footer = document.querySelector(".skin-grid-widgets.ui-sortable .gridWidgetTemplatePositie.AgendaStandaard.disablesorting.hoogte-1-knoppen-0.breedte-1 .widget-footer");
footer.classList.add("highlight");
.highlight {
background-color: yellow;
}
<div class="skin-grid enkeleKolom" id="Infobalk">
<div class="skin-grid-widgets ui-sortable">
<div class="gridWidgetTemplatePositie AgendaStandaard disablesorting hoogte-1-knoppen-0 breedte-1">
<div class="widget-header">
here comes the header text
</div>
<div class="widget-body">
some body text
</div>
<div class="widget-footer">
here comes the footer text
</div>
</div>
</div>
</div>
try this:
<script>
document.querySelector (".skin-grid-widgets .gridWidgetTemplatePositie .widget-footer");
</script>
You don't need to add adjacent classes like "skin-grid-widgets ui-sortable" in querySelector, if you do so then query selector assumes that "skin-grid-widgets" is parent of "ui-sortable". Use just one of the classes at one DOM level.
The selector ain't complex, your thoughts are.
Listen to yourself, to the description you provide of what you want to select:
"grab" the last div in below HTML
Not grab the node with the class widget-footer inside of a node that has all these classes: gridWidgetTemplatePositie AgendaStandaard disablesorting hoogte-1-knoppen-0 breedte-1, inside a node ...
//a utility, because DRY.
//and because it's nicer to work with Arrays than with NodeLists or HTMLCollections.
function $$(selector, ctx=document){
return Array.from(ctx.querySelectorAll(selector));
}
//and the last div in this document:
var target = $$('div').pop();
or
"grab" <div class="widget-footer"> in below HTML
var target = document.querySelector("div.widget-footer");
or the combination: grab the last div.widget-footer in the HTML
var target = $$('div.widget-footer').pop();
I have my object like so:
var text = document.getElementsByClassName('decode-text')[0];
It is a list of html elements that look like:
<div class="decode-text">
<div class="cycleText">
<div class="cycle-0">
<div class="text-animation">hey</div>
</div>
<div class="cycle-1">
<div class="text-animation">you</div>
</div>
<div class="cycle-2">
<div class="text-animation">guys</div>
</div>
</div>
</div>
I will just use indexof but want to understand why .contains returns false?
text.classList.contains('cycleText'); = false // why
Also any recommendations on getting the number of 'cycle-*' class names in this node list?
You can achieve this using css attribute selectors. The ^ means "starts with":
document.querySelectorAll('[class^="cycle-"]');
classList is a list of classes assigned to the current DOM element, and does not include the classes of its children.
The only entry of the list is decode-text.
I want manipulate a certain class, selecting a ID like a parent, this way a want manipulate the class without define a ID in each class. In this example I want manipulate the class 3, but only the class inside on the div with ID b.
<div id="a">
<div class="1">
<div class="2">
<div class="3">
<div class="4">
</div>
<div id="b">
<div class="1">
<div class="2">
<div class="3"> // This tag is the selected to change
<div class="4">
</div>
<div id="c">
<div class="1">
<div class="2">
<div class="3">
<div class="4">
</div>
do
$("#b .3")
or if you wanna specifically get direct child of the parent
$("#b > .3")
Something like this should do the job:
var a = document.getElementById('b');
var b = a.getElementsByClassName('3');
alert (b[0].className)
SIDENOTE:
Why does it make sense to use javascript over jQuery?
CODE ops / sec
document.getElementById('b'); 12,137,211
$('#b'); 350,557
Vanilla JS is way faster...
You can enumerate selectors from the oldest parent to the deepest child, for your case:
$("#b .3)
Or easier to understand version:
$("#b).find(".3")
It first select elements with id b, then, from its children, it selects elements with class 3
If you have the ID in jQuery you should be able to just use $('#' + myId + ' .3') to select the desired element dynamically. In the given example myId would of course be 'b'. If its always the same element you want to access and all you need is the corresponding selector, then of course the static $('#b .3') or $('#b > .3') for a direct parent-child relationship suffice.
I have a big div wit a lot of smaller divs within it. Say,
<div id="parent">
<div id="child1">
</div>
<div id="child1">
</div>
<div id="child2">
</div>
<div id="child1">
</div>
<div id="child1">
</div>
</div>
If I'm currently at the last 'child1', how dow I get to the top most child1 with prev()? For me it breaks when it reaches 'child2'.
First of all your HTML markup is invalid. There shouldn't be more that one element with the same ID in a document.
Read Element identifiers: the id and class attributes
id:
This attribute assigns a name to an
element. This name must be unique in a
document.
class:
This attribute assigns a class name or
set of class names to an element. Any
number of elements may be assigned the
same class name or names. Multiple
class names must be separated by white
space characters.
You can use the parent and :firstchild to get the first element inside your current parent element.
You can use something like this if you are currently at any child of element 'parent'
$(this).parent().find("div:first-child");
I think you want this:
$(this).prevAll('.child1').eq(0);
$(this).closest('.parent').find('.child1:first')
I changed to classes, because you really should only ever have one element of any given ID in a page