Discovering the HTML element with a particular attribute using jQuery

Is there a way to select an HTML element with a specific attribute, regardless of whether that attribute has a value or not? I have seen similar questions regarding elements with attribute values, but nothing based solely on the existence of the attribute itself.

Consider this sample HTML:

<div id="id1">
  <div class="c1"></div>
  <div class="c2" an-attribute ></div>
  <div class="c3"></div>
</div>

How can I target the div within #id1 that contains the attribute an-attribute? It may not be in a specific order compared to other divs, but it will always be within #id1.

jqueryhtmlcss

Answer №1

Give this a shot.

$('#id1 div[an-attribute]');

Answer №2

To select elements based on their attributes, you can utilize the attribute selector:

$('img[src]') // or $('[src]')

Answer №3

Check out this code snippet I put together to showcase attribute identification.

HTML Markup

<div id="id1">
    <div class="c1"></div>
    <div class="c2" id="testr">dd</div>
    <div class="c3"></div>
</div>

JavaScript Snippet

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script>
    $('.c2').on('click',function(){
        var id =$(this).attr('id')
        alert(id);
    })
</script>

Answer №4

console.log($('[specific-attribute]').attr('id'));  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <body>
    <div specific-attribute id="123456789"></div>
  </body>
</html>

Answer №5

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<script>
$(document).ready(function(){

$('[an-attribute]').css("color","red")

});
</script>

<div id="id1">
  <div class="c1">dsadsa1</div>
  <div class="c2" an-attribute >dsdsads2</div>
  <div class="c3">dsadsad3</div>
</div>

Answer №6

const item=$('#id1').find('span[data-attribute]');

Answer №7

$("section").find().data("specific-attr");

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

Unusual activity observed in HTML5 contenteditable functionality

Within a list item, I have a span element. <ul> <li>text part 1 <span class="note">this is a note</span> text part 2 </li> <li>text part 3</li> </ul> When you double click on th ...

javascripthtml

Disable the javascript link on small devices

I currently have a javascript link (Trustwave) on my desktop website theme that I need to deactivate when viewed on mobile devices: Located in footer.tpl: <div style="position:absolute; margin-left:100px; margin-top:50px"> <script type="text/j ...

javascripthtmlcss

The deployed MVC code encountered an unexpected token "u" in the JSON at position 0

I have a MVC 5 application that is functioning well in the development environment. However, when I publish and deploy it to the testing server (or any other server), I encounter a JavaScript error when clicking on the login button: Uncaught SyntaxError ...

javascriptjquery

The NgModel function within *ngFor is executing more times than necessary during initialization

Displayed on screen are a list of tutorials with check boxes next to each tutorial's states. These tutorials and states are pulled from the database, each tutorial containing a name and an array of associated states. Here is the HTML code: <div c ...

htmlangulartypescriptloopsangular-material

Issues with HTML structure across various devices

Being a novice in web development, I've been experimenting with creating a modal body. The code snippet below represents my attempt at structuring the modal body: <div className="row modalRowMargin textStyle" > ... Your e ...

javascripthtmlcssbootstrap-4

Enhancing HTML table interactivity: Updating class of cells upon hover

While attempting to update the class on hover, I noticed that the class changes from 1 to hovering cells However, I want the class to change from 1 to currently hovered cells If moving the mouse from 1 to 10 and then to 2, the currently hovered cells wil ...

jqueryhtmlcss

Pass various checkboxes data in an email using PHP and $_POST

I'm having trouble sending my checkbox values via my email form as it keeps returning as "None" every time. Any assistance would be greatly appreciated! Code snippet: <form method="post" name="sentMessage" id="contactForm" novalidate> ...

phphtmlpost

How to retrieve an element by its class using JavaScript and Jquery while implementing a

I am working on creating a quiz example using Jquery, but I am facing some challenges when trying to manipulate CSS classes with hover in Jquery. .right{ background-color: white; } .wrong { background-color: white; } .right:hover { background-color ...

javascriptjquerycsshtml

How can we calculate the `rotate` value for a CSS transform using a formula

Referencing this particular fiddle, I've developed a unique custom underline technique utilizing transform: skew(-30deg) rotate(-2deg);. Is there a way for me to substitute the static -2 with a dynamic formula based on the element's width? For ...

csssass

Images displayed on cards using BOOTSTRAP

I'm interested in creating cards with categories such as Men, Women, and Kids. I envision these cards to have a design similar to the ones shown here. My goal is for users to be able to click on one of the cards and be directed to either the Men or W ...

htmlcssbootstrap-4e-commerce

Creating animated effects through Javascript and CSS triggered by user events

As a beginner in javascript and CSS, I am experimenting with creating a simple animation that adjusts the transparency of an image when triggered by an event. However, I am facing an issue where the animation only works every other time the function is cal ...

javascriptjqueryhtmlcssanimation

Ensure that the floating div is positioned along the right side and adjusts to accommodate the

I've been searching for a solution to this issue, but it seems like I might not be articulating it correctly because I haven't been able to find an answer yet. On my page, there is a 'quick links' button that is supposed to stay fixed ...

htmlcss

Executing a jQuery function using a hyperlink tag

How can I trigger the deactive_tiptip function in the Jquery tiptip plugin by clicking on a href link? The function will be called inside the tooltip div. Below is the code snippet of the tiptip plugin: /* * TipTip * Copyright 2010 Drew W ...

jqueryfunctiontooltipcalltiptip

Using jQuery to extract a specific row from a dynamic table cell within an AJAX JSON operation

My challenge is to correctly identify a selected table row based on the button clicked within a table cell that has been generated from a string using jQuery, with the button class as the selector. I have browsed through similar questions and adjusted my ...

jqueryajaxbuttondynamichtml-table

Semantic UI table with rowspan feature

I am a beginner with semantic ui and I have been trying to replicate this specific layout. While going through semantic ui's documentation, I found something similar but not quite identical. Below is the HTML code: <div class="ui celled grid cont ...

htmlcsssemantic-ui

Failed to add a new entry to the Sharepoint 2013 List

Having trouble saving an item to a SharePoint list using Knockout.js and REST. In my Ajax POST request, I've used ko.toJSON but the entry doesn't show up in the SharePoint list. It's possible that I'm passing the wrong parameter value. ...

jqueryhtmlajaxknockout.jssharepoint-2013

Revolutionary Approach to Efficiently Handle Multiple rows with Jquery

Greetings to everyone, I am currently in the process of developing an application that retrieves data from a database via AJAX by calling a .php file. Within this app, I have a table with 4 columns. The first two columns consist of dropdown menus, the thi ...

javascriptphpjquerydynamichtml-table

What steps can I take to display a download button when a file is clicked on?

As a backend developer, I usually don't delve into JavaScript tasks, but I have a simple query for JavaScript developers that I need help with. Here is my question: I am trying to display a download button when a specific file is clicked using jQuery ...

javascriptjquerynode.jsreactjs

Can you identify the attribute used for marking up an HTML code tag?

While examining a website's code to understand how they styled a specific section of their page, I came across the following snippet: <code markup="tt"> I thoroughly checked for any other references to this particular markup attribute ...

htmlcss

Unexpected behavior with scrollTop

Note Reopening bounty as I forgot to award it last time. This question has already been answered by Master A.Woff. I am looking for a way to automatically scroll to a specific row when a user expands it, so that the content is immediately visible witho ...

javascriptjquery