Getting divs by classes with querySelector() and exclude other class - javascript

I'm trying to simply get all of the first divs while exlcuding the second divs:
<div class="_5pcr userContentWrapper">
<div class="_5pcr userContentWrapper _4nef">
I searched and fout of that the querySelector function should be doing the job. However I tried it with multiple inputs, but all of those result in an empty list. If I use the DOM function getElementsByClass it works but then of course I got all divs, also the second ones that I don't want.
Here are the querySelector function calls I tried:
listOfPosterName = document.querySelectorAll('div._5pcr userContentWrapper:not(._4nef)');
listOfPosterName = document.querySelectorAll('DIV._5pcr userContentWrapper');
listOfPosterName = document.querySelectorAll('_5pcr userContentWrapper:not(_4nef)');
listOfPosterName = document.querySelectorAll('DIV.userContentWrapper:not(_4nef)');
I have even tried to just get the same result as with "getElementsByClass('_5pcr userContentWrapper')" with this:
listOfPosterName = document.querySelectorAll('_5pcr userContentWrapper');
That also did not work. I thought it's a problem because of the space between the classes, but I tested it also with a single class.
I really appreciate help!

Your problem is just putting too much spaces where unnecessary:
listOfPosterName = document.querySelectorAll('._5pcr.userContentWrapper:not(._4nef)');

You are not writing the selectors correctly.
When you want to select an element having multiple classes you would do:
document.querySelectorAll('.class1.class2.class3');
When you leave a space character in a selector - it becomes what is called a descendant selector. Example:
<div class="class1">
<p class="class2"></p>
</div>
In this case, class2 could be selected with a descendant selector:
document.querySelector('.class1 .class2');
Your fixed example could look like so:
<div class="_5pcr userContentWrapper">
<div class="_5pcr userContentWrapper _4nef">
document.querySelectorAll('._5pcr.userContentWrapper:not(._4nef)');

querySelector() works just fine, but you have to pass it the selector properly. Multiple classes should be concatenated together, not space separated like in the HTML.
document.querySelector("._5pcr.userContentWrapper").classList.add("selected");
.selected { background-color:yellow; }
<div class="_5pcr userContentWrapper">Me</div>
<div class="_5pcr userContentWrapper _4nef">Not Me</div>

Related

Select all divs with specified string

$("#slide") code formating i've got something like this, i want my function to select all id's starting from slide, slide1, slide2 etc.
In bash there is slide*, which does that job, is there anything like this in jquery?
Thank you for your help
You can use the attribute selector in combination with :not() to select slide* and exclude #slide2
$('[id^="slide"]:not("#slide2")').css('color','red');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slide">slide</div>
<div id="slide1">slide1</div>
<div id="slide2">slide2</div>
<div id="slide3">slide3</div>
<div id="slide4">slide4</div>
yes $('[id^="slide"]'). This says: any Node that has an id-attribute that starts with "slide";
But your actual mistake is to use IDs in this place. Enumerated whatever hint that you're actually dealing with a list of some kind. In this case this list would better be represented by a (css) class instead of a set of IDs.
*Enumerated whatever means: enumerated variables, properties, methods, functions, IDs or classes, ... In each of these cases you should determine the nature of this group and reconsider your structure.
jQuery is not necessary
In this case it's better to use classes, or element tags, in place of IDs
Given what you have, you could easily look at the start of the id attribute for "slide" and collect all except slide2 using the :not() selector filter function.
let slides = document.querySelectorAll('[id^="slide"]:not(#slide2)');
console.log(slides);
slides.forEach(s=>s.innerHTML+=' - matched');
<div id="slid1">not slide</div>
<div id="slide">slide</div>
<div id="slide1">slide1</div>
<div id="slide2">slide2</div>
<div id="slide3">slide3</div>
<div id="slid2">not slide</div>
$('[id^="slide"]').not('#slide2');
Is what you are looking for as a css selector.

selecting on dom parser using jquery with relevant class div12 div31 all at one time

Thanks for reading my post..
Just consider the below scenario of html architecture.
<div class="wrapper">
<div class="doubt-123232" id="value"></div>
<div class="question></div>
<div class="doubt-232323" id="query"></div>
</div>
In the above DOM if you need to select the class starting with doubt-***** (which include doubt-123232, doubt-232323) all at a time and do processing using jQuery.
We can select each class one by one and do processing, but in my page I have lot like this . I cant do it for each class to select and do processing then it became a trivial process.
Is there way to select the similar class or id all at time for processing in jQuery?
Thanks.
Yes, you can do this using Attribute Starts With Selector:
var divs = $('div[class^="doubt-"]');
You can use:
var items = $('div[class^=doubt]');
This is known as the "starts with" selector.
Alternatively you could use:
var items = $('div[class*=doubt]');
which is the "contains" selector.
Note that in this case, doubt is one word. If there are multiple words with spaces in between, you should put quotes around them. It is not required to quote single words.
See here for documentation on the "starts with" selector.
You can use Attribute Starts With Selector [name^="value"]
var divs = $('div[class^="doubt-"]');
selecting them all:
var doubts= $('[class^="doubt-"]');
then you access them:
doubts.each(function(index){
this. ... // and so on
});
Try somthing like this:
$("[class^=doubt-]").each(function(){ //do some staff });

hide() and show() method when a class selector returns 2 elements

I have a class selector that is returning 2 elements. I did a console.log() and it is an array where 0 is the first and 1 is the second element.
I need to show()/hide() these elements depending on a condition.
I tried doing,
mySelector[0].hide()
mySelector[0].show()
mySelector[1].hide()
mySelector[1].show()
I also tried,
mySelector.first().hide()
mySelector.first().show()
mySelector.last().hide()
mySelector.last().show()
Both approaches did not work. Also, I understood that even css() cant be applied with display: none. What should be my approach to achieve this?
Given the following that matches two elements:
var mySelector = $(".pre.fileContent")
if you want to show (or hide) both:
mySelector.show();
if you want to show (or hide) one of them:
mySelector.eq(n).show();
where n starts from zero.
$("mySelector:eq(0)").hide();
$("mySelector:eq(1)").show();
you can use this
you can use jQuery method with class name.
for eg.
HTML
<div class="mySelector"></div>
<div class="mySelector"></div>
<div class="submit">CLICK</div>
CSS
.mySelector{border:2px dashed green; height:100px; width:100px;}
jQuery
$(".submit").click(function(){
$(".mySelector").toggle();
});
Live fiddle here

How to use document.getElementById with jquery next siblings selector

I want to remove some silblings. I tried as given below.
But not working. why? And how to solve it?
<div>
<div id="idx1">child1 </div>
<div id="idx2">child2</div>
<div id="idx3">child3</div>
...
<div id="/a/b/c">This should be last child</div>
<div id="idx4">Remove it.</div>
<div id="idx5">Remove it.</div>
<div id="idx6">Remove it.</div>
...
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
// Since the id contains special chars,
// javascript method has been used to get the element.
lastChildObj = jQuery(document.getElementById('a/b/c'));
// I don't know how to remove the childs after lastChildObj.
// I tried as given below.
lastChildObj.filter('~').remove();
There are two key steps to this.
Select the elements to remove
Remove them
Step 1 can be broken down into two parts, obtaining a reference to the last element to keep, then getting a list of all of its siblings that come after it. Step 2 just uses the .remove() function.
$(document.getElementById('/a/b/c')).nextAll().remove();
You can still use jquery for your selector but you need to escape the id like so :
$("#\\/a\\/b\\/c")
Then you just need to select any following divs like this :
$("#\\/a\\/b\\/c").nextAll().remove();
http://jsfiddle.net/8mMJq/
Further informations about special characters in selectors : http://api.jquery.com/category/selectors/
This should work for you:
var base = document.getElementById('/a/b/c');
while(base.nextSibling){ // While the element has siblings
base.parentElement.removeChild(base.nextSibling); // remove the siblings from the parent element.
}
Working example
You can also make it slightly more efficient:
var base = document.getElementById('/a/b/c');
while(base.parentElement.removeChild(base.nextSibling))​ // Remove the nextSiblings while they exist.
Example
Try this :
$("#\\/a\\/b\\/c").nextAll().remove();
JsFiddle : http://jsfiddle.net/QcvWQ/
First of all change id from "/a/b/c" to ie "abc" and then run following
$("#abc").nextAll().each(function () { $(this).remove());});

jquery remove removing from another element

According to here, jquery's remove function should work like so..
$('div').remove('selector');
Which I'm trying in this example.
HTML:
<div class="wrapper">
<p class="unwanted">This should be removed</p>
<p class="retained">This will remain</p>
</div>​
JavaScript:
jQuery(document).ready(function($) {
$('div').remove('p.unwanted'); //not working
//$('p.unwanted').remove(); //this works
});
​
It's not working. What am I doing wrong?
You've misunderstood what the documentation is saying. It's not looking for elements that are descendants of the matched elements that match the selector, it's simply filtering down the set of already matched elements to those that match the selector, and then removing them.
If you have this HTML:
<div class="wanted">Some text</div>
<div class="wanted">Some more text</div>
<div class="unwanted">Some unwanted text</div>
and then executed this jQuery:
$('div').remove('.unwanted');
then it would only remove that third <div> (the one with the unwanted class on it), because it first selects all <div> elements, and then only removes those that match the selector.
Example jsFiddle
You're trying to remove something that is both div and p.unwanted. The filter in remove() is applied to the current set of nodes, which in this case is all div elements.
Use the children set instead:
$('div').children().remove('p.unwanted');
You should use the following:
$('p').remove('.unwanted');
Argument in remove works as a filter. So here, you first select all <p> elements and then remove only those which have class unwanted.
DEMO: http://jsfiddle.net/qwXSw/1/
try this
$(document).ready(function() {
$('div').find('p.unwanted').attr('class', '');
});

Categories