Using Jquery To Select An Element By It's Style
I am trying to select an html element that has no classes or id's, but I still need to select it. Here is what the element looks like:
If there is, do something like this:
.eltable {}
OR#eltable {}
Using Attribute selector:
console.log($('table[style="background-color: white; border: 1px solid #aaa; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); border-left: 10px solid #1E90FF; margin: 0 auto;"]').length);<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><tablestyle="background-color: white; border: 1px solid #aaa; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); border-left: 10px solid #1E90FF; margin: 0 auto;"></table>Using filter() method
console.log($('table').filter('[style="background-color: white; border: 1px solid #aaa; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); border-left: 10px solid #1E90FF; margin: 0 auto;"]').length);<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><tablestyle="background-color: white; border: 1px solid #aaa; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); border-left: 10px solid #1E90FF; margin: 0 auto;"></table>Solution 2:
$('div[style^="background: blue; "]').append('<p>This is the selected</p>');<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><divstyle="background: red; height: 300px; border: 2px solid black;"></div><divstyle="background: blue; color: #fff; height: 500px; border: 2px solid green;"></div>Solution 3:
Try using the substring select *=, and only matching against a unique portion of the style attribute:
$("table[style*='background-color: white; border: 1px solid #aaa;']")
Seems to work for me.
Post a Comment for "Using Jquery To Select An Element By It's Style"