I'm creating a dynamic filter and this is working fine but I've one problem. I'm selecting all filters on a querySelectorAll function combined with a php get function. Unfortunately some of the dynamic content has weird names like:
(art) and more
With a split join function this will result in the following code:
document.querySelector('#(art)_and_more');
This will result into a error cause it's not a valid selection. Does anyone know a way how to solve this?
I would like to keep my names as they are cause it's part of a big system.
If it's an ID, then you'd use getElementById since by definition there can be only one match (IDs must be unique).
var element = document.getElementById("(art)_and_more");
In the general case, you'd use a quoted attribute selector:
var list = document.querySelectorAll("[id='(art)_and_more']");
// or
var list = document.querySelectorAll('[id="(art)_and_more"]');
...but again, IDs must be unique.
Related
In my code I am trying to get all classes which begin with priceList_ into an array for later use. the code I used to do that is: var prefix = document.querySelector('[class^="priceList_"]').className;
There is one problem I am having with this code, which is that it only gives the first class with that prefix instead of giving an array of classes. Does anyone know the solution to this problem?
You need to be using document.querySelectorAll, document.querySelector purpose is to find the first element on the page matching the condition.
Just to add
document.querySelectorAll('[class^="priceList_"]').className
will error as the returned object is an NodeList of Nodes, not a singular Node (from which you'd be able to get the classe's).
If you wanted to obtain a structured array of each elements classe's then do the below
const classes = [...document.querySelectorAll('[class^="priceList_"]')].map(elem => elem.className);
This will assign an array of classe's (in the order of the DOM elements on the page). You could also do
const classes = [];
for (const elem of document.querySelectorAll('[class^="priceList_"]')) {
classes.push(elem.className);
}
console.log('CLASSES', classes);
querySelector() returns the first result, if you want multiple results use querySelectorAll().
Use querySelectorAll(), it gives NodeList. It is iterable.
Consider using Element.classList instead of className. You can also call classList.entries() to get an iterator.
You can also get an array from className with Element.className.split(" ")
classList on MDN Web Docs
I'm trying to target the number of search results on our website for each search term so that I can see how many results each one pulls in.
I'm working off of this article, but I can't get the javascript function correct to pull out the number (which could be as high as 2000) and put it into a variable.
<div class="search-results-text"><strong>732 results</strong> found for ‘<strong>search term</strong>’</div>
Hoping someone can help me out with the javascript function that would grab that number before "results". Thanks!
You would probably get away with a custom Javascript variable like this:
function() {
return document.querySelector('.search-results-text strong').innerText.split(" ")[0];
}
The querySelector with the CSS selector gets the Element, innerText is the text without the markup, the split splits the string up by whitespace, which gives you an array, and the first element of that array is your number (array are index starting with zero, so [0] refers to the first element).
This is not particularly elegant (for one you probably want to add some sort of error handling), and you could actually replace document.querySelector('.search-results-text strong').innerText with a DOM type variable in GTM (which by default returns the text of the element).
I don't think you can get the number with CSS selectors alone.
I'm getting some html from a angular get request and I'm trying to get some specific elements from this response. Which is a list of div's with the class "post-holder". Extracting the html works fine, but to extract each div to insert separately has some troubles.
This is the code I'm trying with:
var firstTag = '<main id="posts">';
var res = data.substring(data.indexOf(firstTag) + firstTag.length, data.indexOf('</main>'));
var html2 = $.parseHTML( res );
var x = html2.getElementsByClassName("post-holder");
The last line gives me the following error in chrome: "TypeError: undefined is not a function".
I'm guessing that getElementsByClass has some troubles with the variable generated by jquery. Is there another approach to do the same or a way to fix what I already have?
See the documentation for parseHTML:
Returns: Array
Description: Parses a string into an array of DOM nodes.
getElementsByClassName is a method on DOM elements, not on arrays. You need to loop over the array, check if each value is an element (as opposed to, for instance, a text node or a comment) and then call getElementsByClassName on the values.
Or you could just construct a jQuery object and use .find() on it instead.
My app uses a Parse backend to keep a running list of all the concerts in my area that my friends and I are interested in.
On the main page I use a parse query display a module for each show stored in the database. As each module is created, I use this code to add a data attribute to the show's outermost div, corresponding to the show's object ID in parse:
var showId = object.id;
$("div.show_module:last").data("showId", showId);
I'm successfully able to retrieve the showId of a specific show when the user clicks on the show's module:
$("#showsList").delegate(".showModuleBody", "click", function() {
var storeObjectId = $(this).closest("div.show_module").data("showId");
});
That all works great, proving that assigning the data-attribute is working.
Where I'm running into trouble is trying to find an element with a specific data attribute or a specific value for that attribute on a given page. The end goal is to get the y-offset of that div so I can scroll the page to the appropriate spot. I assumed I could use the following code to find the element, but it isn't working -
// find all elements with class .show_module
var allShows = document.querySelectorAll('.show_module');
// find all elements with showId data attribute
var showsWithShowId = document.querySelectorAll('[data-showId]');
// find all elements with a specific showId data attribute
var showToFind = document.querySelectorAll("[data-showId='2']");
The first of those 3 works, proving that all the elements I'm interested in are loaded into the page by the time I'm calling this function, but the 2nd and 3rd queries return nothing.
Any idea what I'm doing wrong here? Is it something with syntax? Is querySelectorAll just incompatible with how I'm setting the data attribute?
I tried to include only what I figured are the salient bits of code, but if more is necessary please let me know.
Try This
$('*[data-customerID="22"]');
For more info, look here:
Selecting element by data attribute
jQuery's .data method does not create a HTML attribute, but associates a value in its internal data store with the element.
If you want to set a data attribute with jQuery, then you need to use:
$("div.show_module:last").attr("data-showId", showId);
To get the value, you can use .data('showId') or .attr('data-showId').
(note that HTML attributes are case-insensitive, so you can also write "data-showid" instead.)
I get some strings from an external source, and I display them in spans on my page.
I need a way to get back to those strings using document.getElementById() or jQuery's $("#XXXX"), so along with each string I get some sort of an identifier, I use that identifier as the ID of the span.
The problem is that the identifier I get could contain chars like + for example. Which is not allowed as a value for the id attribute http://www.w3schools.com/tags/att_standard_id.asp
Additionally, these identifiers are case-sensitive. So I thought of using a hashing function like SHA or MD5, to hash the identifiers I get, then use them as ids for my spans, and I can apply the hashing function again to find my element.
This seems complicated for such a simple functionality. Is there a better way to do this? or maybe a very simple hashing function that would guarantee id-friendly chars and case-sensitivity? (HTML's id is not case-sensitive, that's another reason to consider hashing functions)
Can you ditch the identifier you get and just implement something simple like this:
var counter = 0;
function uniqueId(){
return "Id" + ++counter;
}
You could just increment the id's with a number and some sort of string to begin the ID.
The span id's would be "a1", "a2" etc.
I'm guessing that the problem is that you're thinking later you'll be getting the same strings and will want to transform them in the same way, and then use these to find the original corresponding elements?
If so, you'll just need to sanitize your strings carefully. A series of regular expressions could help you map from invalid to valid characters, and make the capitals unique. For instance, you could transform "A" into "-a-", and "+" into "-plus-".
A carefully chosen scheme should guarantee that the chances of a collision (i.e. someone giving you a string that looks like an escaped version of another string) should be very small, and in any case, detectable immediately.