jQueryでidやclass、placeholder等要素名を指定

概要

プラグイン等を使用していると、html側から編集できなかったりします。 そんなときにこれで外部から属性を指定できます。

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<script type="text/javascript">
    $(function(){
        $("div.text label").attr('id','loginname');
    });
</script>

説明

$("div.[divのクラス名] [タグ名]").attr('id','[付けたいid名]');

例

```

test1

test2

test3

test4

``` divにclass、pにidを指定する場合。

$(function(){
    $('div').attr('class', 'test_div');
    $('p').attr('class', 'test_p');
}

これでhtmlでいうと以下のような状態になります。

<div class="test_div">
    <p id="test_p">test1</p>
    <p id="test_p">test2</p>
    <p id="test_p">test3</p>
    <p id="test_p">test4</p>
</div>

最初と最後だけ指定する

pタグが複数並んでいますが、最初だけ、最後だけに指定したい場合は以下のように書きます。

$('p:first').attr('class', 'test_p');
$('p:last').attr('class', 'test_p');

要素番号を指定してクラスを追加する

最初や最後ではなく、2番目だけなんて時には以下のように書きます。 番号は0から始まるので、2番目の場合は"1"となります。

$('p').eq(1).attr('class', 'test_p');

奇数や偶数にだけ指定する

奇数には"odd"、偶数には"even"セレクタを使用します。

$('p:odd').attr('class', 'test_p');
$('p:even').attr('class', 'test_p');

連番で追加する

"test_p01"、"test_p02"、"test_p03"... と、連番で追加したいときにはeachを使用します。

var i = 1;
$('p').each(function(){
    $(this).addClass('test_p'+i);
    i++;
});

直下の要素にだけ追加する

以下のように子要素がある場合。

<div id="test_div">
    <p>test1</p>
    <p>test2</p>
        <div>
            <p>test2-1</p>
            <p>test2-2</p>
        </div>
    <p>test3</p>
    <p>test4</p>
</div>

親要素のpタグにしか適用させたくないな...
というときに、#test_div直下のpタグと指定します。

$('#test_div>p').attr('class', 'test_p');

これで以下のように親要素#test_div直下のpタグにしか適用されません。

<div id="test_div">
    <p class="test_p">test1</p>
    <p class="test_p">test2</p>
        <div>
            <p>test2-1</p>
            <p>test2-2</p>
        </div>
    <p class="test_p">test3</p>
    <p class="test_p">test4</p>
</div>

補足

```$('p').attr('class', 'test_p');``` ではなく、 ```$('p').addclass('test_p');``` のようにも書けますが、個人的には前者の方が分かりやすいと思っているので、 そちらを使用しています。