Is there a way to select an element without any attributes, regardless of what attributes are present in other elements?
For example:
<p class="a" id="para1">This is paragraph 1</p>
<p id="para2" class="a b c d e f" >This is paragraph 2</p>
......
......
<p>This is paragraph 3</p> <!-- target this p tag with no attribute -->
<div>
<p class="inside-div" id="para5">This is paragraph</p>
</div> <!-- target this div tag with no attribute-->
To determine if any attributes exist, you can utilize the attributes collection of an HTML element.
Click here for a live demonstration
const paragraphs = $('p').filter(function(){
return this.attributes.length > 0;
});
If you want to select all elements without attributes, you can use the selector body>* in combination with an attribute filter (otherwise you may end up selecting html/head/title etc)
$("body>*").filter(function() {
return this.attributes.length === 0;
})
Here is a simple example on jsfiddle using the original poster's HTML.
This particular approach promotes enhanced code reusability by expanding jQuery selector functionality.
An example of HTML usage:
<span>Text</span>
<span>Text123</span>
<span id="test">Text123</span>
Introducing the noattr selector:
$.extend(jQuery.expr[':'], {
noattr: function (el) {
return el.attributes.length == 0;
}
});
Utilizing the :noattr selector in practice.
const noAttributeElements = $("span:noattr");
console.log(noAttributeElements[0]); //<span>Text</span>
console.log(noAttributeElements[1]); //<span>Text123</span>
console.log(noAttributeElements[2]); //undefined
Can someone help me align my table to the center of the webpage? I have tried using align="right" and "center" but neither seem to be working. Any tips on how to position the table correctly? <table style="table-layout:fixed;" align="right" cellspaci ...
I've encountered an issue with my simple css tabstrip. It seems to render correctly in: Safari 5.0.2 on Mac IE8 on PC FireFox 3.8.12 on PC However, when viewed on FireFox 3.8.12 on Mac and Ubuntu, the tabs overlap the bottom border of the containe ...
I am facing an issue with my Angular application. In the HTML file, there is a div element with the class "row" which contains two div elements with the class "col". When clicking on a button, the size of these columns should change: <button class="btn ...
Looking for help with HTML structure <div class="services-article-elements-single"> <div class="services-article-description"> <button class="services-article-read-more-btn">read more</button> </div> <d ...
I am trying to integrate the HTML code from a file called protocol-modal.html into my main HTML file as a directive: <div class="modal-content"> <form class="form-horizontal" role="form" name="questionForm"> <div class="modal-heade ...
When dealing with a layout like the one below, how can we ensure that elements are centered within the wrap container? The margins around the elements should be flexible but at least 14px. .wrap{ display: grid; grid-template-columns: repeat(auto-fi ...
When I initialize a library in my ngOnInit method like this: ngOnInit() { this.$grid = jQuery('.grid').masonry({ // options itemSelector: '.grid-item',//, columnWidth: 384, gutter: 24 }); ...... } and then call the method from ...
Currently, there is a "quote" section on the homepage of my WordPress theme at that I would like to update with a dynamic "cycling" banner. I am looking for something similar to the rotating testimonials featured in the header of this website. The idea i ...
To emphasize a specific paragraph element, I developed a JavaScript function that displays it above a darkened background. My approach involved using jQuery to generate an overlay and then duplicating the targeted paragraph element while positioning it ab ...
I'm seeking clarification on a topic. Referencing this blogpost Connecting HTML and jQuery Validate: Adapters To create a client-side validator, you must follow two steps: writing the validation rule for jQuery Validate, and creating the adapter ...
In my HTML, I have created a simulated keyboard with buttons that correspond to characters. When you click on these buttons, the character is added to a text element on the screen. Additionally, you can use your physical keyboard to input characters in the ...
I encountered an issue while compiling my less file with ST2. I have configured the following plugins: LESS LESS build SublimeOnSaveBuild less2css The code I am attempting to compile is as follows: .generate-columns(4); .generate-columns(@n, @i: 1) whe ...
I am currently designing a breadcrumb navigation for a website. The breadcrumbs are generated using a templating language before the page is displayed. However, after rendering the page, I need to make some adjustments. Instead of using multiple IF/ELSE s ...
I am attempting to create a notification div that smoothly slides down when active. The sliding effect is achieved through this script: <script type="text/javascript> $(document).ready(function(){ $('#notice').slideDown(1000); ...
Can someone help me with resizing an iframe that I want to add from one page of my site to another? I've managed to include the iframe using div and specified a portion for it, but now I need to make the entire webpage within the iframe fit onto the n ...
I'm working on a form that looks like this: <form> <input class="form-control" id="searchField" type="text"> <button type="submit" id="searchUserButton">SEARCH BUTTON</button> </form> When I click on SEARCH BUT ...
I am currently working on paginating a section. The pagination is functioning properly, but I would like to know if it is possible to reset the pagination dynamically based on the number received from an input using jQuery. For example: In my current pa ...
Having trouble setting gradients using the angular js ng-style directive. I can successfully set normal colors using the code below: <span ng-style="{'background-color': slidercolor}">works</span> However, when trying to set a gradi ...
I recently updated my website with new fonts in the CSS, but unfortunately they are not displaying correctly. I have attempted three different fixes to resolve the issue: SOLUTION 1: body { -webkit-animation-duration: 0.1s; -webkit-animation-name: fo ...
I'm encountering a small issue with my horizontal drop-down menu bar. I've implemented jQuery functions to toggle Parent and child items, which are working smoothly on my local server but not on the live server. I have double-checked all script f ...