I am opting to choose children using JavaScript instead of jQuery due to limitations in my current project

Currently, I am utilizing jQuery to determine if there exists an li element within the #mainNavigation div that possesses the data-val attribute of "-1". This functionality is easily achievable with jQuery, however, I am in need of replicating the same behavior but using JavaScript. My dilemma lies in grasping how to achieve the same level of specificity in drilling down elements as facilitated by jQuery selectors.


if(document.querySelector("#mainNavigation ul li ul li[data-val='-1']")) {
    document.getElementById("mainNavigation").style.paddingLeft = "10px";
};

<div id="mainNavigation">
    <ul>
        <li>
            <ul>
                <li data-val="-1">Title</li>
            </ul>
        </li>
    </ul>
</div>
javascripthtmlcss

Answer №1

To locate the specific element, you can utilize the method .querySelector():

if (document.querySelector('#topMenu ul li ul li[data-value="-1"]')){
   // ...
}

If precision about the level is not necessary, try this alternative approach:

if (document.querySelector('#topMenu li[data-value="-1"]')){
   // ...
}

Another method without relying on querySelector:

var listItems = document.getElementById('topMenu').getElementsByTagName("li");
var itemFound = false;
for (var idx = 0; idx < listItems.length; idx++) {
    if (listItems[idx].getAttribute("data-val") === "-1") {
        itemFound = true;
        break;
    }
}

if (itemFound) {
    // ...
}

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

Tips on avoiding the conversion of the ✳ symbol into an emoji

My issue lies in my ✳ (Eight-Spoked Asterisk) symbol being converted to an emoji on iOS/android devices. Find more about the Eight-Spoked Asterisk Emoji here. Could someone guide me on how to prevent the normal symbol ✳ from being transformed into an ...

javascripttypescriptunicodeemojiconverters

An effective method for appending data to a multidimensional array in Google script

Is there a way to expand a multidimensional array of unknown size without relying on a Google Sheets spreadsheet to manage the data? I've searched everywhere but can't find an example for a 3-dimensional array. Here's the challenge I'm ...

javascriptarraysmultidimensional-array

Tips for sending an array of data from the client to req.body in an axios request

I am facing an issue with sending user data collected from the front end via an ajax call to an axios post request in the back end. The parameters I need to pass include arrays of data, but when I check the req.body in the backend using console.log(), I no ...

javascriptnode.jsajaxaxios

Error message: "The term 'Outlet' is not recognized in react-router version 6.4"

What is the proper way to define the Outlet component in react-router version 6.4? Below is a code snippet: function Layout() { return ( <div> <Navbar /> <Outlet /> <Footer /> </div> ); } ...

javascriptreactjsreact-router

Javascript - struggling with implementing changeClass() function on click event

I am working on creating movable images within a container using the jQuery plugin found at . My goal is to have items appear within the container when clicked, but I am struggling with changing the class of my object (.item) outside of the container. Th ...

javascriptjquery

"Step-by-step guide on assigning a class to a Component that has been

When attempting to pass a component as a prop of another component, it functions correctly. However, when I try to pass a Component and manage its CSS classes within the children, I find myself stuck. I am envisioning something like this: import Navbar fr ...

javascriptreactjs

What is the best way to retrieve the identifier for a specific role?

Struggling to acquire a channel permissions overwrite by obtaining the ID of a role stored in a variable. Any suggestions on how I can access the ID of this new role? This problem has been consuming my time for several days now. I have experimented with t ...

javascriptdiscord.js

Angular 6 and Typescript: How to Map Objects in Arrays within Arrays

We currently have two arrays named speisekarte (consisting of 10 objects) and essensplan (containing 8 objects). const speisekarte = [ { id: 11, name: 'Kabeljaufilet', price: 3.55, type: 'with fish' }, { id: 12, name: 'Spaghet ...

htmlarraysangulartypescriptmapping

Unable to transform dynamically loaded text area into CKEditor

Executing the get_content function upon a link click. function get_content(n) { var hr=new XMLHttpRequest(); var url="./updatecontent.php"; var vars="id="+n; hr.open("POST",url,true); hr.setRequestHeader("Content-type","application/x-w ...

javascripthtmlajaxckeditor

Tips for sending a reference to a JavaScript function

While constructing a table with DataTables and utilizing AJAX as its data source, I am encountering an issue with passing a function into the AJAX parameters. The $.post() function from regular JQuery seems to always send the value of my variable when the ...

javascriptjqueryajax

Ways to conditionally display a component in Next.js without the issue of caching CSS styles

I'm a newcomer to Next.js and I'm still trying to wrap my head around how the caching works. Let's take a look at this simplified example: An index page that displays either Test1 or Test2 components, based on whether the current minute is ...

csstypescriptcachingnext.js

Adding animation to the initial loading process of a Vue application

I want to include an animation when the application's modules are loading for the first time. I have attempted to use an image, but I am unable to add an animation to it. Adding a CSS file did not always work as expected. I then tried utilizi ...

javascriptcssvue.jssingle-page-application

AngularJS view does not wait for the completion of $http.get request

Within my controller, the code snippet below is present... $scope.products = dataService.getJsonData(); console.log($scope.products); The corresponding code in my dataservice is as follows: .service('dataService', function ($http) { t ...

javascriptangularjs

The flashing of Bootstrap tabs can be seen on various pages

Currently, I am encountering an issue with bootstrap tabs on my website. There seems to be a blinking problem with the tabs on certain pages. Check out this video showcasing the blinking tab in the search result page: Watch Here Interestingly, the same ta ...

jqueryhtmlcsstwitter-bootstrap

How can you easily reuse an Ajax method in Vue.js by passing a Vue data array name as an argument?

After dedicating 9 hours to learning Vue.js, I have ventured into using it with JQuery Ajax. My challenge lies in making the last argument work as intended. Passing an array name expected to exist in vue data: {... seems to yield no results. Update: I hav ...

javascriptjqueryvue.js

Excessive Margins in Bootstrap on Mobile Devices

After attempting to create a webpage using Bootstrap 3.3.6, everything looked good on my laptop. However, when I tried to view it on mobile devices using Chrome and other browsers, there was a significant offset issue. Current situation: https://i.sstati ...

csstwitter-bootstrap

What makes 'Parsing JSON with jQuery' unnecessary?

Just performed an ajax request with a query and noticed that my response is already in the form of a JavaScript object. When I try to parse the JSON using: var obj = jQuery.parseJSON(response); 'obj' turns out to be null, yet I can directly ac ...

javascriptajaxjquery

In the event that the user is authenticated within an iframe, proceed to redirect the parent window

Scenario - A situation has arisen where Site X needs to access Site Y through an iframe, both residing on separate servers. Current Progress - X has successfully accessed Y via iframe by adding the following code in the .htaccess file of Y: Header alway ...

javascriptjqueryhtmliframe

Creating a dynamic HTML table in Django by populating it with values from iterative lists

Currently, in the Django framework, I am endeavoring to construct a table using the values stored within a list: List : [[1, 2, 3, 4], [5, 6, 7, 8], [9, 10, 11, 12], [3, 3, 3, 3]]. The envisioned table layout is as follows: Below is the code snippet that ...

pythonhtmldjango

Ensuring the consistency of actions through thorough testing

Currently utilizing xstate for the implementation of a login flow. Within my machine, the initialState triggers a Promise, which redirects to a state with an entry action if rejected. I am seeking to properly test the timing of when this action is called. ...

javascriptreactjsxstate