:submit 非推奨

$(':submit') 1.0追加

補足事項

:submitはjQueryが独自に拡張した仕組みでCSSには存在しない概念です。 そのため、querySelectorAll()によって提供されるパフォーマンスを享受することが出来ません。 モダンブラウザでは、[type="submit"]を使用することを推奨します。

デモ

submit要素を含むTDを選択し、マークします。

<!DOCTYPE html>
<html>
<head>
<style>
  textarea { height:45px; }
  table { font-size:12px;}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<table>
<form>
<table id="exampleTable" border="1" cellpadding="5" align="center">
    <tr>
        <th>タイプ</th>
        <th>要素</th>
    </tr>
    <tr>
        <td><input type="button" value="Input Button"/></td>
    </tr>
    <tr>
        <td><input type="checkbox" /></td>
    </tr>
    <tr>
        <td><input type="file" /></td>
    </tr>
    <tr>
        <td><input type="hidden" /></td>
    </tr>
    <tr>
        <td><input type="image" /></td>
    </tr>
    <tr>
        <td><input type="password" /></td>
    </tr>
    <tr>
        <td><input type="radio" /></td>
    </tr>
    <tr>
        <td><input type="reset" /></td>
    </tr>
    <tr>
        <td><input type="submit" /></td>
    </tr>
    <tr>
        <td><input type="text" /></td>
    </tr>
    <tr>
        <td><select><option>Option</option></select></td>
    </tr>
    <tr>
        <td><textarea></textarea></td>
    </tr>
    <tr>
        <td><button>Button</button></td>
    </tr>
    <tr>
        <td><button type="submit">Button type="submit"</button></td>
    </tr>
</table>
</form>
<div id="result"></div>
<script>
  //対象をマーク
  var submitEl = $("td :submit")
    .parent('td')
    .css({background:"yellow", border:"3px red solid"})
  .end();

  //対象要素数を取得
  $('#result').text('対象要素の数は' + submitEl.length + '個です。');

  // submit無効
  $("form").submit(function () { return false; });

  // 1列目のセルにタグとtype属性名を出力
  $('#exampleTable').find('td').each(function(i, el) {
      var inputEl = $(el).children(),
          inputType = inputEl.attr('type') ? ' type="' + inputEl.attr('type') + '"' : '';
      $(el).before('<td>' + inputEl[0].nodeName + inputType + '</td>');
  })
</script>
</body>
</html>

 Back to top

© 2010 - 2017 STUDIO KINGDOM