A variety of negative () DOM Selectors

I've been trying to select a specific node using two not clauses, but so far I haven't had any luck. What I'm attempting to achieve is selecting an element whose div contains the string 0008, but it's not 10008 and also does not contain the tag "style". In theory, it should work like this:

document.querySelectorAll(" div[id*='0008']:not([id='10008'][style])")

However, as expected, it doesn't quite work out that way.

document.querySelectorAll(" div[id*='0008']:not([id='10008'])")
document.querySelectorAll(" div[id*='0008']:not([style])")

Individually, both of them work perfectly fine, of course.

javascriptjquerycssdomselector

Answer №1

not 10008 and it's also not...

The current selector does not check for what you think it does, it checks whether it does not have the id and a style attribute. Try using this new selector instead:

div[id*='0008']:not([id='10008']):not([style])

Your original solution was invalid because the :not() selector can only contain one simple selector according to W3C standards, but some libraries like jQuery may support multiple selectors. Using jQuery, the following would work as well:

div[id*='0008']:not([id='10008'],[style])

Answer №2

Check out this jsFiddle Demo!

Instead of excluding elements that match both undesired selectors, your goal is to exclude elements that match either one. In jQuery, use the multiple selector with a comma-separated list of undesired elements to achieve this:

$("div[id*='0008']:not([id='10008'],[style])")

Referencing the jQuery documentation, you can see that all selectors are accepted inside the :not() function.

For example, you can use :not(div a) and :not(div,a) within the :not() selector.

Answer №3

One possible solution could be:

let elements = $('div[id*="0008"]').filter(function() {
    return !this.hasAttribute("style") && this.id == '10008';
});

It appears that the intention is to filter out elements like:

<div id="10008" style="color: black">10008</div>

while still keeping elements like:

<div id="10008">10008</div>

Although IDs are usually unique, there may be scenarios where filtering by ID and style attribute is necessary. However, in most cases, it might be more practical to handle such edge cases differently rather than focusing on both ID and style matching simultaneously.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the reason IE7 does not recognize these two strings as equal?

My event handler is designed to remove an element from a list if the corresponding checkbox is unchecked. When the checkbox is clicked, I first capture the value of the label associated with it: var label = $(this).next().html(); Next, I loop through the ...

javascriptjqueryinternet-explorer-7

Using Node.js to alter an existing JSON file

I have a file named a1.json that contains the following data: { "Key1" : [ { "Key11" : "Value11" , "Key12" : "Value12" }, { "Key21" : "Value21" , "Key22" ...

javascriptnode.jsarraysjsonlist

Ensuring the text is positioned centrally and at the bottom of a table cell

Is there a way to center and align text at the bottom of a cell in table? This is my desired layout: ...

htmlcsscss-tables

How can user input be converted into a JavaScript variable?

Looking for help with my webpage - I want users to input their name and age. After hitting submit, I'd like the first input to be stored in a variable called 'name', and the second input in a variable called 'age'. Is this doable? ...

javascripthtmlforms

My type is slipping away with Typescript and text conversion to lowercase

Here is a simplified version of the issue I'm facing: const demo = { aaa: 'aaa', bbb: 'bbb', } const input = 'AAA' console.log(demo[input.toLowerCase()]) Playground While plain JS works fine by converting &apo ...

javascripttypescript

Is it advisable to use only one base SCSS @use import throughout the entire React application?

Hey there, I've got a question that's been on my mind. I really enjoy using SCSS in React, but for the longest time, I steered clear of variables and mixins because dealing with imports after making changes was a complete nightmare for me (I had ...

cssreactjssass

What is the most effective way to transmit multiple pieces of server-side data to JavaScript?

Imagine having multiple Javascript codes embedded in pages. Currently, it's simple to initialize variables by using Print/Echo statements to set JavaScript values. For example: var x = <?php echo('This is a value');?> Initially, I co ...

phpjavascript

Storing a JSON object within a data attribute in HTML using jQuery

In my HTML tag, I am storing data using the data- method like this: <td><"button class='delete' data-imagename='"+results[i].name+"'>Delete"</button></td> When retrieving the data in a callback, I use: $(this) ...

jqueryhtmljson

Open the CSV document

Why am I receiving an error stating ./vacancy-data.csv cannot be found when attempting to pass the csv file into the csvtojson npm package? The csv file is located in the same directory as the code below: var express = require('express'), route ...

javascriptnode.jsexpress

Are there any methods to improve the coding, align images to the center, and ensure that elements stay in their designated positions?

Is there a way to tidy up the code, center images, and keep everything in place? This is the look I desire: The main outer box should remain centered on the browser page. Pause, play, and stop buttons should float to the left of the box. My image sh ...

htmlcss

Performing Batch Writes in Firestore using the Admin SDK

I have a massive ASCII flat file containing 1.5 million lines, which is essentially a list of parts from a manufacturer. I want to store this data in Firestore. Originally saved as a .csv file, the size was 250GB. After converting it to a JSON file using ...

javascriptnode.jsfirebasegoogle-cloud-firestore

Having difficulties accessing the git repository through the application

I am currently working on a Node.js application that needs to connect to a Git repository via the app. The connection works fine locally, and it also runs smoothly when I docker build and run it within a container on my local machine. However, upon deplo ...

javascriptnode.jsgitsimple-git

Starting the Android System Magnifier with a Click: A Step-by-Step Guide

Is there a way to incorporate a magnifying glass into an HTML page using jQuery or within an Android app? Ideally, it would be for a single picture. In my application, I am displaying an HTML file from my assets in a webview. The HTML page utilizes jQuery ...

javascriptandroidjquerycssmagnification

Utilizing the Filter function to extract both the content contained within a class and the class itself

The filter function is working properly, returning multiple divs with a class of post. However, it is only capturing the content inside the div: <h1></h1> and not the entire structure like this: <div class="post"><h1></h1>& ...

javascriptjquery

Unable to send a POST request to http://localhost:5000/api/createuser

During my journey through a MERN stack project tutorial on YouTube, I've come across a roadblock in the middle of my progress. The issue at hand involves the incorporation of user registration, which is a recent addition to my project. Utilizing Thund ...

javascriptreactjsnode.jsmongodbbootstrap-5

Retrieve information using Observables just once in Angular 2

One of my Angular 2 components relies on a service that fetches customer data from a Web API and returns an Observable: getCustomers() { return this.http .get(this.baseURI + this.url) .map((r: Response) => { let a = r.jso ...

javascriptangularrxjsobservable

Use Jquery to select the checkbox inside the td element and mark it as

I've created an HTML table with checkboxes in the td elements, like so: <table id="my_table"> <tr> <td><input type="checkbox" name="td1"></td> <td><input type="checkbox" name="td2"></td> </ ...

javascriptjqueryhtmlcheckbox

The process of loading an image becomes stuck once the submit button is pressed

I have multiple JSP pages where I use an ajax call to submit data. On these pages, I am able to display a loading image before the ajax call and hide it once the call is complete, which works perfectly. $(document).ajaxComplete(function() { $("#loadi ...

javascriptjqueryajaxjsp

What category does React.js fall under - library or framework?

Hey there! I've noticed that sometimes people refer to React JS as a library, while others call it a framework. Can you shed some light on which term is more accurate? ...

javascriptnode.jsreactjsnpmframeworks

JS: Modifying this function to manage a click on a hyperlink

After following the guide provided here I have successfully implemented a drop down list that sends the value to an external PHP script, retrieves HTML output, and displays it in a "div" on the same page. It works flawlessly. My next objective is to send ...

phpjavascriptajax