jQuery [name~=”value”] Selector

Posted in jQuery Tutorial

Updated on Oct 30, 2024

By Mari Selvan

👁️ 42 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

In the realm of web development, jQuery stands out as a powerful library for simplifying tasks related to DOM manipulation and event handling. Among its arsenal of selectors is the [name~=”value”] selector, which allows you to target elements based on the value of their attributes. Mastering this selector opens up a world of possibilities for dynamically selecting and manipulating elements on your web page.

This guide aims to explore the usage of the jQuery [name~=”value”] selector with practical examples to help you grasp its potential.

🧠 Understanding [name~=”value”] Selector

The [name~=”value”] selector targets elements with a specific attribute value that contains the specified value as one of its space-separated values. It's particularly useful for selecting elements with multiple values in their attributes, such as classes or space-separated lists.

💡 Syntax

The syntax for the [name~=”value”] selector is straightforward:

syntax.js

Copied

$("[name~='value']")

📝 Example

Selecting Elements by Class:

Suppose you have elements with multiple classes, and you want to select those elements based on a particular class. Here's how you can achieve that using the [name~=”value”] selector:
index.html
Copied
```
<div class="box red"></div>
<div class="box green"></div>
<div class="box blue"></div>
```
example.js
Copied
```
$(".box[name~='green']").css("border", "2px solid green");
```
This will select the element with the class box and green, applying a green border to it.
Filtering Elements with Data Attributes:

You can also use the [name~=”value”] selector to filter elements based on custom data attributes. For example, let's select elements with a specific data attribute value:
index.html
Copied
```
<div data-category="fruit">Apple</div>
<div data-category="vegetable">Carrot</div>
<div data-category="fruit">Banana</div>
```
example.js
Copied
```
$("[data-category~='fruit']").addClass("highlight");
```
This will add a highlight class to elements with the data-category attribute containing the value fruit.
Targeting Elements with Specific Attributes:

If you have elements with specific attributes, you can target them using the [name~=”value”] selector. For instance:
index.html
Copied
```
<input type="radio" name="gender" value="male">
<input type="radio" name="gender" value="female">
<input type="radio" name="gender" value="other">
```
example.js
Copied
```
$("input[name~='gender']").prop("checked", true);
```
This will check all radio buttons with the name attribute containing the value gender.
Enhancing CSS Selectors:

You can combine the [name~=”value”] selector with other selectors to refine your targeting. For example:
example.js
Copied
```
$("input[type='text'][name~='username']").css("background-color", "lightyellow");
```
This will select text inputs with the name attribute containing username, applying a light yellow background color to them.

🎉 Conclusion

The jQuery [name~=”value”] selector provides a flexible and powerful way to target elements based on attribute values, opening up various possibilities for dynamic DOM manipulation. Whether you're selecting elements by class, filtering based on custom data attributes, or targeting elements with specific attributes, this selector empowers you to achieve your desired effects with ease.

By mastering its usage, you can enhance the interactivity and functionality of your web pages effortlessly.