Select a tag with custom data value and change its href with jquery

jquery find by data attribute name
jquery href contains
how to get href value of anchor tag in jquery
jquery select by name attribute
jquery href selector
jquery get data attribute value from element
jquery selector
jquery get all attributes

I have this piece of codes:

<a href="https://api.whatsapp.com/send?phone=" data-ga-label="666666666" target="_blank"></a>

I want to select this a tag with jquery based-on "data-ga-label" attribute that have a 666666666 value and change its href. How it's possible with jquery? Thank you.

You can add selectors for custom data like below, and then change the href attribute of the link.

$('a[data-ga-label="666666666"]').attr('href', 'https://stackoverflow.com/');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="https://api.whatsapp.com/send?phone=" data-ga-label="666666666" target="_blank">Link</a>

jQuery [attribute$=value] Selector, Select all <a> elements with a href attribute that ends with ".org": The [attribute​$=value] selector selects each element with a specific attribute, with a value  Solution: See this Custom Select Dropdown Options Using jQuery and CSS, Option Group Divide. Earlier I have shared a pure HTML CSS Custom Select, but this is more advanced and it has groups of values. Basically, HTML has a specific < select > tag for creating selectable option interface. By default, it looks like a simple and non-stylish element according to this modern web design era.

In jQuery, you can use the attribute equals selector to select the element. You can then use the attr function to change the href location.

You can also do this in one line, as @Henkan does in his answer. I just split it up to explain what each step does.

Example:

// This selects the element using the attribute equals selector
let el = $("a[data-ga-label='666666666']");

// This modifies the href using the attr function
$(el).attr("href", "google.com");

// Show updated link
console.log($(el).attr("href"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="https://api.whatsapp.com/send?phone=" data-ga-label="666666666" target="_blank"></a>

.attr(), The .attr() method gets the attribute value for only the first element in the matched set. To retrieve and change DOM properties such as the checked , selected , or disabled state of form elements, use the .prop() To safely set values on DOM objects without memory leaks, use .data() . Basics · Custom · Fading · Sliding. You can use the jQuery .attr() method to dynamically set or change the value of href attribute of a link or anchor tag. This method can also be used to get the value of any attribute. This method can also be used to get the value of any attribute.

$('a[data-ga-label="666666666"]').attr('href', 'https://stackoverflow.com/');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="https://api.whatsapp.com/send?phone=" data-ga-label="666666666" target="_blank">Link</a>

Attribute Starts With Selector [name^=”value”], This selector can be useful for identifying elements in pages produced by server-​side frameworks that produce HTML with systematic element IDs. However it  Using the jQuery data attr() method, you can get and set data attribute values easily from selected html elements. jQuery attr() Method The jQuery attr() method is used to get or set attributes and values of the selected html elements.

.data(), Store arbitrary data associated with the matched elements or return the value at the named data store for the first element in the set of matched elements. A string is only converted to a number if doing so doesn't change its representation (for example, the string "100" is converted to the Basics · Custom · Fading · Sliding. Here Mudassar Ahmed Khan has explained how to select HTML Anchor links based on their HREF attribute value using jQuery. He has explained Exact Match as well as Wild Card or Contains match.

jQuery.data(), data( el, "name" ) . Example: Store then retrieve a value from the div element. 1. Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML.

How to Get the data-id Attribute of an Element Using jQuery, Answer: Use the jQuery attr() Method. You can simply use the jQuery attr() method to find the data-id attribute of an HTML element. The following  An element's data-* attributes are retrieved the first time the data() method is invoked upon it, and then are no longer accessed or mutated (all values are stored internally by jQuery). Every attempt is made to convert the attribute's string value to a JavaScript value (this includes booleans, numbers, objects, arrays, and null).

Comments
  • You can use the attribute selector or see this question coping with your problem
  • $("#setAnId").attr("href", "https://api.whatsapp.com/send?phone=" + $(this).attr('data-ga-label'));