質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

91.36%

  • jQuery

    4882questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

jQueryの要素指定について

解決済

回答 3

投稿 2017/11/29 15:46

  • 評価
  • クリップ 1
  • VIEW 82

cazirel

score 1

前提・実現したいこと

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

該当のソースコード

jQuery("[style*='width']").each(function() {}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • masaya_ohashi

    2017/11/29 16:13

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

    キャンセル

  • mts10806

    2017/11/29 16:50

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

    キャンセル

回答 3

checkベストアンサー

+2

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

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

ですので、

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


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

投稿 2017/11/29 17:01

編集 2017/11/29 17:02

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/11/29 17:53

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

    キャンセル

+2

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

.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>

投稿 2017/11/29 16:52

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+2

そもそも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.
  }
});

投稿 2017/11/29 17:11

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

ただいまの回答率

91.36%

関連した質問

  • 受付中

    適切なイベントがわからない。

    前提・実現したいこと imgタグで表示されているアイコンをクリックした後で、ポップアップされるdatepickerの表示崩れを修正したいです。 datepicker内のtabl

  • 解決済

    animate中の処理

    とあるシステムで、メニューの開閉を改修しています。 現在は、クリック連打対応としてフラグを用意し、 animate開始時にフラグON、animate完了時にフラグOFFにするこ

  • 解決済

    jQueryのsortableを使って複数をソートさせる方法を教えていただけないでしょうか

    前提・実現したいこと JQueryでsortableを用いてtable構造の複数ソートを作成しています。 selectableを使ってできないかなど試みておりますが、うまくいき

  • 解決済

    offset().topが効きません。。

    ブログでサイドバーを作成し、ページが一定量スクロールされると、サイドバーを固定で表示させたいと思い調べてコードを入れてみました。 しかしうまく反映されず、 このようなエ

  • 解決済

    resize時のanimateについて

    前提・実現したいこと Jqueryを使用し、マウスオーバーで動くdivを作りました。 初回は想定の動作をするのですが、リサイズをすると、途中のアニメーションが 表示されません

  • 受付中

    jQueryでブラウザの幅と、スクロール量を取得して表示方法を切り替える

    今回はブラウザ幅480px以下の場合で尚且つページトップから100pxスクロールした場合にのみ、#contact_fixed_spの部分を表示したいと思っています。 それぞれブラウ

  • 解決済

    jqueryのdieとliveについて

    $(document).ready(function(){ $("#hogehoge").die("change"); $("#hogehoge").live("c

  • 解決済

    1ページに複数のbxsliderを使いたい

    前提・実現したいこと 1ページに複数のbxsliderを利用して それぞれのliでPrevIcon NextIconを適用させたいです。 発生している問題・エラーメッセージ P

同じタグがついた質問を見る

  • jQuery

    4882questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。