Select Elements Where Attribute Is Non-Empty

Select elements where attribute is non-empty

This works, if you don't mind doing things slightly backwards and you need it to work in browsers that don't support :not:

div[data-pid] {
    color: green;
}

div[data-pid=""] {
    color: inherit;
}

That will make all the divs with non-empty data-pids green.

Fiddle here: http://jsfiddle.net/ZuSRM/

jQuery Find elements with non empty data attribute

Use .filter()

This might get you started

$('button').click(function(){

   $('div.item').filter(function(i){

      return $(this).attr('data-value') != "";

   }).css('background','yellow');

});

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

<div id="container">

  <div class="item" data-value="1">One</div>

  <div class="item" data-value="2">Two</div>

  <div class="item" data-value="">Three</div>

  <div class="item" data-value="3">Four</div>

  <div class="item" data-value="">Five</div>

  <div class="item" data-value="4">Six</div>

  <div class="item" data-value="">Seven</div>

</div>

<button>Find MT Data</button>

Select elements with empty or not-specified attribute

Basically, don't.

It's not good practice to put all your logic into the selector. It will end up being computationally highly expensive (because the parts need to be parsed out of a string before they are interpreted) and messy. Use the beauty of the filter method instead:

$('span')
    .filter(function(){
        return !$(this).attr('cust-attr');
    });

This removes all elements where cust-attr is a non-empty string from the selection.

CSS attribute selector for non-empty attributes

try this

<style>
    [Data-Attribute]:not([Data-Attribute=""])
    {
        background-color: Red;
    }
</style>

jQuery: Select data attributes that aren't empty?

try

$(':not([data-go-to=""])')

UPDATE:

For the sake of not leading anyone astray, this answer will work in older versions of jQuery but is not future-proof. Since @gmo and @siva's answers both seem to be working with later versions I defer to (and encourage you to upvote) their answers....and of course hope you have a fantastic day.

If Attribute value is not empty in given xml, get the attribute value

Select item with @Type="CARMENT" and then it's not-empty ID

//*[@Type="CARMENT"]/@ID[not(.="")]

How to get the number of elements with a non-empty class name

You could create an array from the collection, and filter by whether its className is digital:

const psWithClass = document.querySelectorAll("p[class]");

const countPsWithNumericClass = [...psWithClass]

  .filter(({ className }) => /^\d+$/.test(className))

  .length;

console.log(countPsWithNumericClass );

<p class="">Hello, world!</p>

<p class="5">Hello, world!</p>

<p class="9">Hello, world!</p>

<p class="">Hello, world!</p>

---

Related Topics