javascript - How to select HTML elements which don't have any attributes defined on them? - Stack Overflow

admin管理员组

文章数量:1314246

I need to use jQuery to locate all DIV tags that have no attributes on them and apply a class to each. Here's a sample HTML:

<div id="sidebar">
  <div>Some text goes here</div>
  <div class="something">something goes here</div>
  <div>Another div with no attributes.</div>
</div>

So, I need to take that and turn it into this:

<div id="sidebar">
  <div class="myClass">Some text goes here</div>
  <div class="something">something goes here</div>
  <div class="myClass">Another div with no attributes.</div>
</div>

How do you locate elements of type div that have no attributes via jQuery? Thanks.

I need to use jQuery to locate all DIV tags that have no attributes on them and apply a class to each. Here's a sample HTML:

<div id="sidebar">
  <div>Some text goes here</div>
  <div class="something">something goes here</div>
  <div>Another div with no attributes.</div>
</div>

So, I need to take that and turn it into this:

<div id="sidebar">
  <div class="myClass">Some text goes here</div>
  <div class="something">something goes here</div>
  <div class="myClass">Another div with no attributes.</div>
</div>

How do you locate elements of type div that have no attributes via jQuery? Thanks.

• javascript
• jquery
• html

Share Improve this question Follow edited Aug 31, 2011 at 17:25 Šime Vidas 186k6565 gold badges288288 silver badges391391 bronze badges asked Aug 10, 2011 at 12:39 AlexAlex 35.9k1414 gold badges7979 silver badges163163 bronze badges 4

• 3 No attributes of any type or just no class attribute? – ajm Commented Aug 10, 2011 at 12:41
• No attributes of any kind, so a totally "naked" div: <div>. – Alex Commented Aug 10, 2011 at 12:45
• Is there any other way to solve what you're doing without resorting to searching for "naked" divs? – StuperUser Commented Aug 10, 2011 at 12:56
• The code is being generated by a SharePoint 2010 content query web part; any column value from a list with "Rich Text" has a "naked" DIV wrapped around it. – Alex Commented Aug 10, 2011 at 13:02

Add a ment  | 

8 Answers 8

Sorted by: Reset to default 16

Here you go:

$('div', '#sidebar').filter(function () {
    return this.attributes.length === 0;
})

Live demo: http://jsfiddle/phbU9/

The attributes property returns a list of all attributes set on the element. "Naked" elements have an empty attributes list.

Update: Be sure to read Tim's answer below which provides a solution for older versions of IE, since my own solution doesn't work in IE8 and below.

@Šime's answer is close but doesn't work in IE 6, 7 or 8, where an element's attributes collection has an entry for every possible attribute, not just those specified in the HTML. You can get round this by checking each attribute object's specified property.

Live demo: http://jsfiddle/timdown/6MqmK/1/

Code:

$("div").filter(function() {
    var attrs = this.attributes, attrCount = attrs.length;
    if (attrCount == 0) {
        return true;
    } else {
        for (var i = 0; i < attrCount; ++i) {
            if (attrs[i].specified) {
                return false;
            }
        }
        return true;
    }
});

check this out:

http://jsfiddle/thilakar/CHux9/

You need to give some sort of selector, in this case Ive used your side bar but it can be anything. Then get the children that have no class attribute and add a new class. See JSFiddle for the example:

http://jsfiddle/HenryGarle/q3x5W/

  $("#sidebar").children('div:not([class])').addClass('newClass');

So this would return the 2 elements with no class tag and leave the sidebar and div with the class pletely unaffected.

You could use a bination of jQuery's has attribute selector and the not selector. For example:

$('div:not([class], [id])').addClass('myClass');

jsFiddle demonstrating this

With this approach, you need to explicitly specify the attributes to check the presence of. Sime's solution would apply the class to divs that do not have any attributes at all.

To expound upon Tim Down's answer, I remend checking that the attrs var not null special cases where the html has ment tags, etc.

try $('div:not([class])').addClass('myClass'); it is a general approach because the class will apply to all the div that have no class

$('#sidebar div')` or more general `$('div'); //returns collections of divs

to answer the question:

$('#sidebar div').addClass('myClass');

本文标签： javascriptHow to select HTML elements which don39t have any attributes defined on themStack Overflow