Jquery:Select All Element with Custom Attribute

jQuery : select all element with custom attribute

Use the "has attribute" selector:

$('p[MyTag]')

Or to select one where that attribute has a specific value:

$('p[MyTag="Sara"]')

There are other selectors for "attribute value starts with", "attribute value contains", etc.

Jquery find all elements with custom attribute begin with, get rest of it's name and it's value

You can use a loop through each object's attributes this.attributes and use the attribute's name and value properties.

Running example:

$("input").each(function() {    $.each(this.attributes, function() {        if (this.name.indexOf('bind-') == 0) {            console.log(this.name + ' has the value: ' + this.value);        }    });});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><input bind-koby='hello'><input bind-douek='stack'><input will-not-show='yes'><input bind-hello='overflow'>

jQuery select by custom attribute

To be able to select the div with certain score you could use this. That will get each div with that value of a score.
$('div[score="Result:78c61ce9"]')

And if you wanted to find it based on a certain result which was in a variable you could do

$('div[score="Result:' + val + '"]')

JQuery selector by custom attribute value and element type

You'd mix them by simply using both, like this

$("input[type=image][myAttr='org']")

but note that myAttr is not a valid attribute, and you should be using data-attributes instead

How to select all the HTML elements having a custom attribute?

You just need to use $("[mytag]")

console.log($("[mytag]"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><p>11111111111111</p><p mytag="nina">2222222222</p><div>33333333333</div><div mytag="sara">4444444444</div>

JQuery select elements with custom attributes

One way to achieve this is to loop over using .each() and check the custom attribute of each selected element.

Working Code Snippet:

$("[display-order]").each(function(item){  if($(this).attr('display-order') !== '-1')    console.log('found');})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><table id="t01">  <tr>    <th>HEAD 1</th>    <th>HEAD 2</th>         <th>HEAD 3</th>  </tr>  <tr id="Grp1" display-order="0">    <td>Grp1 data</td>    <td>Grp1 data</td>          <td>Grp1 data</td>  </tr>  <tr>    <td>Grp1 data</td>    <td>Grp1 data</td>          <td>Grp1 data</td>  </tr>  <tr>    <td>Grp1 data</td>    <td>Grp1 data</td>          <td>Grp1 data</td>  </tr>  <tr id="Grp2" display-order="-1">    <td>Grp2 data</td>    <td>Grp2 data</td>          <td>Grp2 data</td>  </tr>  <tr>    <td>Grp2 data</td>    <td>Grp2 data</td>          <td>Grp2 data</td>  </tr>  <tr>    <td>Grp2 data</td>    <td>Grp2 data</td>          <td>Grp2 data</td>  </tr><tr id="Grp3" display-order="0">    <td>Grp3 data</td>    <td>Grp3 data</td>          <td>Grp3 data</td>  </tr>  <tr>    <td>Grp3 data</td>    <td>Grp3 data</td>          <td>Grp3 data</td>  </tr>  <tr>    <td>Grp3 data</td>    <td>Grp3 data</td>          <td>Grp3 data</td>  </tr></table>

How to get elements by a specific value of a custom attribute in jQuery?

$("tagName[attribute='value']")

Or, in your case:

$("div[data-role='content']")

Will return the right elements.

From there, if you wanted to iterate over the set of elements that match this selector and do something evil, you could:

$("[data-role='content']").each(function(index){

     Do something evil
     $(this) is the current element in the iteration
});

Please note that the tagName is optional. JQuery selectors can be concatenated at will, so you can query simulataneously for tagname (simple string), id (prefaced by #), class (prefaced by .) or attribute (in square brackets as above), or for any limited combination of them eg:

 $("tagName#someId.someClass.someOtherClass[attribute='value']")
 $("[attribute='value']")
 $('tagName')
 $('#someId')

Are all valid queries, however keep in mind that jquery will only return elements that match ALL conditions in the query.

jQuery selectors on custom data attributes using HTML5

$("ul[data-group='Companies'] li[data-company='Microsoft']") //Get all elements with data-company="Microsoft" below "Companies"

$("ul[data-group='Companies'] li:not([data-company='Microsoft'])") //get all elements with data-company!="Microsoft" below "Companies"

Look in to jQuery Selectors :contains is a selector

here is info on the :contains selector

jQuery: Find the element with a particular custom attribute

var number = 6;
var myDiv = $('div[data-divNumber="' + number + '"]');

find elements having custom attribute with some specific value and replace it

As per the code sampleimplies that it's a partial match/replacement, You can use .attr(fn) to update the attribute value

$("[data-socketid=$abc]").attr(function(_, value) {
   return value.replace('abc', 'xyz');
});

---

Related Topics