Could not find this anywhere
Say I have 5 divs like so
<div class="wrapper">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
my jquery selector
$('.wrapper div:nth-child(3)')
This is great but how do I select all the divs besides nth-child(3)?
I know I can combine two filters as follow:
$('.wrapper div:gt(3)')
$('.wrapper div:lt(3)')
and I tried chainning :nth-child():not() it returns the nth-child
Is there a better way of doing it?
This will do it:
$('.wrapper > div:not(:nth-child(3))')
The > is necessary if you actually want only the direct children and not all matching div descendants that are not the third child of their immediate parent element.
Related
How can I get direct child from element section?
I've tried target it by query selector, but it didn't work. For this case I don't want to use class or id.
Am I using it correctly?
I want to target it from section.
Thanks for help.
var section = document.getElementsByTagName("section")[0];
var div = section.querySelector(section + "> div"); //this not work
<section>
<form>
<div></div>
<div></div>
</form>
<div> //I want target this div
<div></div>
<div></div>
</div>
</section>
Use query selector specifying the selector like section > div directly:
var div = document.querySelector("section > div");
console.log(div);
<section>
<form>
<div></div>
<div></div>
</form>
<div id="my-target-element"> //I want target this div
<div></div>
<div></div>
</div>
</section>
If you really want to do that on the section element, get the element and then use the query selector like below, looking directly for the child div element:
const section = document.querySelector('section');
console.log(section.querySelector('section > div'));
// or even
console.log(section.querySelectorAll('div')[2]);
<section>
<form>
<div></div>
<div></div>
</form>
<div id="my-target-element"> //I want target this div
<div></div>
<div></div>
</div>
</section>
You are concatenating section.querySelector(section + "> div") a string with and object which is not work in querySelector
BTW if you use section.querySelector("div") it will return the first div of the elements so what you want is section.querySelectorAll("div")[2] which point to third div see the example in two parts, the second one is yours.
var section = document.getElementsByTagName("section")[0];
var div = section.querySelector("div"); //this not work
console.log(div);
//What you want
var section = document.getElementsByTagName("section")[0];
var div = section.querySelectorAll("div"); //this not work
var target = div[2];
console.log(target);
<section>
<form>
<div>1</div>
<div>2</div>
</form>
<div> I want target this div
<div>3</div>
<div>4</div>
</div>
</section>
in the other side you can set an id for that div and directly find it by getElementById but from you mentioned you don't want find it by class or id.
UPDATE:
At least there should be an info about your target div to be able find it either added dynamically or statically, if you can not define class or id it is good to define and attribute like <dive attName='value'></div> or you can find it by content.
Therefore there should be a specific position for your target div it is not possible to find a div when you don't have any information about it. if that div have specific content you can iterate all div in a for and check it, but the best way is defining class or id for that div or at least defining an attribute for it.
var div = section.querySelector("section > div");
I'm looking for a way to select the first child element of multiple parent divs, of which the parent divs have the same class. This is my HTML:
<div class="wrapper">
<p>Select this paragraph</p>
</div>
<div class="wrapper">
<img src="https://picsum.photos/200/300" title="Select this image">
<p>Don't select this</p>
</div>
<div class="wrapper">
<p>Select this paragraph</p>
<p>Don't select this paragraph</p>
</div>
Please see my full CodePen Here.
I'm trying to select the first child element of each div with the class wrapper and apply the same class to all of these child elements. I was looking at something in the lines of this:
$('.wrapper').children(":first").addClass("noMargin");
The problem with this is that it only selects the child element of the first parent div, but it doesn't select the img and the first p of the third wrapper. I figured you need some kind of array for this and apply a class to all of them, but how can I achieve this (with preferably jQuery)?
You're close, what you need is to go through the elements that have the .wrapper class and append the noMargin class to their first children i.e
$('.wrapper').each(function() {
$(this).children(":first").addClass("noMargin");
});
you can use following sample it is working fine
$('.wrapper :nth-child(1)').addClass("noMargin");
or another syntax
$('.wrapper :first-child').addClass('noMargin');
Hello I'm trying to reach an elemnt by using get.ElementByTagName and javascript. I dont want to use class and id. How can I reach 3rd div iside of 2nd div?
<div></div>
<div>
<div></div>
<div>Here</div>
<div></div>
</div>
<div></div>
<div></div>
<div></div>
<div></div>
You can use document.querySelector with nth-child
console.log(document.querySelector('div:nth-child(2) > div:nth-child(2)'))
<div></div>
<div>
<div></div>
<div>Here</div>
<div></div>
</div>
<div></div>
<div></div>
<div></div>
<div></div>
Note that I selected the second child because that's the one with "Here" in it. If you want to target the empty one after it, use nth-child(3) instead...
Just as a sidenote
I dont want to use class and id
That's a very bad idea, left alone because it would be faster to select the elements you want to target, and it's also much easier to select them, based on a "correctly built" html. The normal way would be to give your elements classes and / or ids (also because of styling reasons to attach the correct css to them)
I have a problem selecting the second .prev()
HTML:
<div></div> <- Set margin to 0;
<div></div>
<div id="interactive"></div>
jQuery:
$("#interactive").prev().prev().css("margin", "0");
It's going to give CSS to both of them, i want the changes only apply for the first div.
Best Regards,
You can check this working fiddle:
http://jsfiddle.net/adp8qxyb/
<div id="interactive"></didv>
The Problem might be some syntax/markup errors in your HTML. Be sure every tag is well closed
HTML
<div id="target"></div>
<div></div>
<div id="interactive"></div>
jQuery
$("#target").css("margin", "0");
This is better practice than prev().prev() and efficient
Html:
<div></div>
<div></div>
<div id="interactive"></div>
JavaScript:
var f;
for( f=0;f<document.getElementsByTagName("div").length;f++){
var div = document.getElementsByTagName("div")[f];
if(div===document.getElementById("interactive")){
document.getElementsByTagName("div")[f-2].style.margin="0";
}
}
I have tested it!
It works also if there are more elements before the 3 divs!
Consider this DOM :
<div id="div1">
<div class="no-select-inside">
<p>Don't select me</p>
</div>
<div>
<p>Select me</p>
<div><p>Select me too</p></div>
</div>
<div>
<p>Select me</p>
<div><p>Select me too</p></div>
</div>
<footer class="no-select-inside">
<p>Don't select me</p>
<div><p>Not me</p></div>
</footer>
<section>
<p>Select me</p>
<div><p>Select me too</p></div>
</section>
</div>
I want a fast and reliable jquery (or bare DOM) selector to select those p tags that not inside 'no-select-inside' class
Everything is dynamic, but I can assign an attribute to not selectable DOM element.
Edit
The real test case isn't a class selector (maybe a complex attribute selector, ...)
Everything is dynamic and could be too deep nested (100 down to DOM tree under a no-select-inside there is p that has a no-select-inside parent and with all the answer even those elements are selected)
I have all no-select-inside cached (Backbone's $el and can be cached in an array for performance) but real problem is selecting those elements in a fast way (20ms in chrome is too slow!).
The general-purpose solution would be to filter out those that have a .no-select-inside ancestor, for example:
$("p")
.filter(function() { return !$(this).closest(".no-select-inside").length;})
// and now do what needs to be done
This should be reasonably efficient because it only goes over the whole document just once.
Try using .not() or :not() to filter out the p elements inside no-select-inside
$('#div1 p').not('.no-select-inside p')
$('#div1 p:not(.no-select-inside p)')
Try this:
$('div:not(.no-select-inside) p')
You can use .not as the working example is here
$(document).ready(function(){
var abc = $('#div1').find("p").not('.no-select-inside p');
$(abc).each(function(e){
alert($(this).html());
});
});
http://jsfiddle.net/8F7Kc/14/