Mysterious JQuery attribute

I've come across a piece of code that utilizes an unfamiliar selector that I can't seem to figure out:

$("div[tag=" + someVariable + "]").css("display", "block");

From what I gather, the selector is searching for a div element with an attribute named tag, where the value matches someVariable.

What exactly is the purpose of the tag attribute? Despite numerous Google searches, I haven't found any clear answers.

EDIT: Here's another line of code:

$("div[tag=" + someVariable+ "]").addClass("someClass");

Is it possible that this code snippet generates a new div with a custom attribute, and then appends it to the content?

jqueryhtmlcssdom

Answer №1

Although custom-defined attributes are not in line with the HTML spec, most browsers do not impose any restrictions on them.

The individual who designed this HTML has code that resembles:

<div tag="something">

In HTML5 (which achieved "recommendation" status in Oct of 2014), custom tags are supported by prefixing them with "data-" (learn more). So, technically, it would have been more appropriate to write it as:

<div data-tag="something">

and

$("div[data-tag=" + someVariable + "]")

Answer №2

Feel free to get creative with your attribute names, you can even go wild and name them something like funkyweirdname - just keep in mind that it may not be recommended and could fail any validation checks. It is generally suggested to use data-{tag} format for attributes that you define yourself. However, there is no strict rule against using tag as an attribute name if you or the script developers prefer it. It is worth noting that tag is not a standard tag in HTML.

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

unable to submit Angular form via post method

I'm encountering an issue with the code I wrote in HTML. The error message says, "The page you are looking for cannot be displayed because an invalid method (HTTP verb) is being used." This is how my HTML code looks: <form name="payment" action ...

angularjshtmlforms

Is it possible for me to customize the CSS of the masterpage for a specific aspx file?

Recently, I completed a website that was almost ready to be published. However, my client now wants to add a new page with similar content as the main masterpage (including the logo, menu, and a few buttons), but with some changes in colors and background ...

htmlcssvb.net

Tips for extracting HTML entities from a string without altering the HTML tags

I need assistance with removing HTML tags from a string while preserving html entities like &nbps; & é < etc.. Currently, I am using the following method: stringWithTag = "<i> I want to keep my ->&nbsp;<- element space, bu ...

javascripthtmltagsentityinnerhtml

When a user clicks, the DIV disappears and simultaneously updates the MySQL database

I have a DIV that needs specific functionality: Conceal the div (display:none) when clicked by the user (I've got this part figured out) Make updates to a MySQL database (this is where I need help) I came across this code snippet on SO here and inc ...

phpjquerymysqlajax

Insert an image into a Word document using the addHtml function in PhpWord

Can someone help me with an issue I'm having in PhpWord? I am trying to insert an image into a Word document using HTML code, but it doesn't seem to be working. I am working in Visual Studio Code and the image is located in the 'public&apos ...

htmlphpword

sent a data entry through ajax and performed validation using jquery

Is there a solution to validating the existence of an email value using ajax after validation work is completed? Despite attempting to check for the email value and display an alert if it exists, the form continues to submit regardless. See below for the ...

javascriptphpjqueryhtmlajax

Use jQuery AJAX to add a new record to a webmethod and refresh the dropdown list with the updated

After successfully adding a record via a jQuery AJAX call to a web method, I would like to update the dropdown list without using an update panel. What is the most efficient way to accomplish this? Thanks! ...

asp.netjqueryajax

I want to locate every child that appears after the <body> element, and extract the HTML of the element containing a specific class within it

It may sound a bit confusing at first, but essentially I have some dynamically generated HTML that resembles the following: <body> <div class="component" id="465a496s5498"> <div class="a-container"> <div class="random-div"> ...

javascriptjqueryhtmlcssalgorithm

Expand the div to fit the rest of the screen following the fixed-size navigation bar

I am looking to create a webpage layout that includes a header, mid section, and footer. In the mid section, I want to have a fixed width navigation bar of 250px, with another div holding the content that stretches to fill the remaining space in the browse ...

htmlcsslayoutcss-positionstretch

Leveraging AJAX Post Data in NodeJS using Express

I'm currently working on retrieving the values I send for an ajax post within my node application. After referring to a helpful post on Stack Overflow, here is what I have implemented so far: Within Node.js: var express = require('express&apos ...

javascriptjqueryajaxnode.jsexpress

contrasting the application of logic in Rails controllers versus JavaScript within the .js.erb files

When dealing with a large "data" active record object that needs to be filtered based on user interactions on a page, the question arises about where to place the data-filtering logic. Currently, the filtering is done in the rails controller action, simpli ...

javascriptruby-on-railsajaxjquery

Unable to add a border to the thumbnail containing text

Is there a way to achieve a nice border on my thumbnail section below? I attempted using a container but it resulted in the text overflowing on md or sm screen widths. <div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-8 col-sm-offset ...

htmlcsstwitter-bootstrap

Obtain the ending section of a URL using JavaScript

Is it possible to extract the username from a URL like this example? I'm interested in seeing a regex method for achieving this. The existing code snippet only retrieves the domain name: var url = $(location).attr('href'); alert(get_doma ...

javascriptjqueryregex

Adjust the CSS to ensure that all elements have the height of the tallest element in the set

Can anyone help me solve a design issue I'm facing? I have a div with three floating buttons, but one of the buttons is taller than the others due to more content. I'm looking for a way to ensure that all buttons are the same height as the talle ...

htmlcssflexbox

Error loading custom Javascript in MVC 4 view during the first page load

I'm working on an MVC 4 application that utilizes jQuery Mobile. I have my own .JS file where all the functionality is stored. However, when I navigate to a specific view and check the page source, I notice that all scripts files are loaded except fo ...

javascriptjqueryhtmlasp.net-mvcjquery-mobile

Displaying XML data in an HTML table

Encountered a challenge while fetching data from an external XML document using JS. Following the w3schools tutorial for AJAX XML, but faced an issue I couldn't resolve. The XML structure is as follows: <root> <document-id> <author ...

javascripthtmljqueryajaxxml

Zurb Foundation gem causing navigation errors

Typically, I rely on the Twitter Bootstrap Rails gem for my projects, but this time I decided to try out the Zurb Foundation gem. Following the installation instructions meticulously, I added the navigation code: <div class="row"> <div class="th ...

htmlruby-on-rails-3sasszurb-foundation

Modify only the visual appearance of a specific element that incorporates the imported style?

In one of my defined less files, I have the following code: //style.less .ant-modal-close-x { visibility: collapse; } Within a component class, I am using this less file like this: //testclass.tsx import './style.less'; class ReactComp{ re ...

javascriptcssreactjsless

Combine rows with the same value in the first column of an HTML table

My HTML table has dynamic content, and I need to merge rows in the first column only if their values are identical. You can see an image of the table here. Specifically, if the values in the first column match, those rows should be merged together while le ...

javascripthtmldatatable

Adjust the vertical size of the slider in Jssor

Hi there! I'm currently working on a slider that I want to have a dynamic width (100% of the container) and a static height of 550px on PCs, while being responsive on mobile devices. Below is my code snippet: <div class="col-md-6 right-col" id="sl ...

javascriptjqueryhtmlcssjssor