jQueryの要素指定について

Question

###前提・実現したいこと
jQueryでstyle="width"を持っている要素を指定したい（複数の属性があっても「width」があれば指定する）のですが、この記述だとstyle="border-width"を持っている要素も選ばれてしまいます。
「width」がある場合のみに限定した指定方法を教えてください。

###該当のソースコード

jQuery("[style*='width']").each(function() {}

Comments

[masaya_ohashi]

それはタグに直接styleで書き込まれている場合のみですか？それともスタイルシート等で間接的にwidthが設定されている場合も含みますか？

[m.ts10806]

border-widthとwidth両方指定されている場合はOKということでいいですよね？

Answer 1

そもそもstyle属性ですべきではないと思いますが、
できないものは仕方ないので、引っかかった後に処理しましょうか。

<div id="a" style="WIDTH:100px">a</div>
<div id="b" style="border-width:1px;">b</div>
<div id="c" style="border-width:1px;width:100px">c</div>

jQuery("[style*='width' i]").each(function(index, element) {
  if (element.style.width) {
    console.log(element.id); // a, c.
  }
});

Answer 2

[style*="width"]は部分一致なのでwidthがどこかに含まれていればヒットします

[style^="width"]（前方一致）にするとborder-widthなどはヒットしなくなりますが、<div style="height: 100px; width: 100px;">のようにwidthの前に他のプロパティがあるとヒットしなくなります

ですので、

$('[style^="width:"],[style*=";width:"],[style*=" width:"]')

この辺りが現実的かなと思います

Comments

[cazirel]

シンプルで分かりやすい回答でした。ありがとうございました。

Answer 3

もっといい方法がありそうですがやっつけです

.red{background-Color:red;}

$(function(){
  $("*").filter(function(){
    return (Array.prototype.filter.call($(this).prop("style"),function(x){
      return x.match(/^width$/i);
    })).length>0;
  }).addClass('red');
});

<div style="border-width:1px">1</div>
<div style="width:100px">2</div>
<div style="WIDTH:200px">3</div>