Select all divs with specified string - javascript

$("#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.

Related

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

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>

How to select a DIV if its child has any children?

I'm trying to select any divs on a page if a certain child of theirs has any children of its own.
Here's how the structure looks:
<div id="ID-SOME_LONG_ID">
<div class="GK">
<div id="SOME_LONGID_#1434646398866197"></div>
</div>
</div>
So I want to select all divs with id ID-SOME_LONG_ID only if the GK DIV has any children. It may or may not.
ID- stays the same and SOME_LONG_ID changes with each one.
The other one SOME_LONG_ID is the same on as the parent, and after the # it's a 16 digit number that is random.
Would using Regex be a good idea to look for them or maybe using jQuery's .children() like $( ".GK" ).children()?
Thank you!
Use :has(), :empty, and :not()
$('#ID-SOME_LONG_ID:has(.GK:not(:empty))')
However, note, :empty will fail if you want real children without text nodes. In that case you can do
$('.GK').filter(function() {
return $(this).children().length > 0;
});

jquery remove element if it occurs twice

I have something like this in my html:
<div class="onlyContent">
<!-- some more stuff here -->
</div>
<div class="onlyContent">
<!-- some more stuff here -->
</div>
Now, with jQuery I want to remove the 2nd occurence of the class onlyContent HTML from the dom.
The final result should be this:
<div class="onlyContent">
<!-- some more stuff here -->
</div>
I figured out that you can somehow use the nth-child-selector, but trying to access it this way didn't do it for me
$('.onlyContent:nth-child(2)').remove();
You can use :eq(1) for targetting second element in matched set:
$('.onlyContent:eq(1)').remove();
If the number of elements more than two, then you should use :not(:first) or :gt(0):
$('.onlyContent:not(:first)').remove();
or
$('.onlyContent:gt(0)').remove();
use below code . use jQuery :eq() selector.
Select the element at index n within the matched set.
check DEMO
$('.onlyContent:eq(1)').remove();
you can try this
$('.onlyContent:gt(0)').remove();
You can try this -
$('.onlyContent:gt(0)').remove();
It will remove all the duplicates. Only the first one will be present.
You can use .slice for this.
$(".onlyContent").slice(1).remove();
Nice and simple, no fuss. Working example.
From the .slice documentation:
Reduce the set of matched elements to a subset specified by a range of
indices
You can find more here.
Use .length property to check the numbers of selected elements on the page and if its value is greater than 1 then remove the elements other than first...
if($('.onlyContent').length > 1) {
$('.onlyContent:gt(0)').remove();
}
you can try
$(".onlyContent").not(':first').remove();

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 });

Counting div's with class and returning position

I have a page with many dynamically creted div's as seen below:
<div class="open"></div>
<div class="open"></div>
<div class="open"></div>
<div class="open"></div>
I'm looking for a way to get get a position of an element (eg. If the element is the first instance of, assign id="1" if element is the second instance of, assign id="2".
I'm currently using the following jquery, but am stuck, as Im not sure where to go from here.
$(document).ready(function () {
var numDialogs = $('.open').length;
});
Any suggestions?
Just use:
$('div.open').prop('id', function(i){
return 'openElement' + (i + 1);
});
JS Fiddle demo.
I've deliberately added a prefix string because while numerical ids are valid under HTML5, they remain invalid under HTML4, and are difficult to select using CSS selectors.
References:
prop().
Mark, you can target the element and then add an attribute like so:
$('.open').attr('id', numDialogs);
This will give it all 4's in this case, but I'll leave you to wrestle with the actual logic to implement the right numbers. Good luck.

Categories