jQueryのノードリストみたいなやつをつくりたいときはadd()をつかうと良いかも 😎

例えば配列をもとにDOMをたくさんつくりたいとき、

なにも考えないバージョン

let $body = $(document.body),
    arr = [
      {index: "66", name : "岡田"},
      {index: "00", name : "高濱"},
      {index: "1", name : "清田"},
      {index: "54", name : "デスパイネ"},
      {index: "61", name : "角中"},
      {index: "44", name : "井上"},
      {index: "7", name : "鈴木"},
      {index: "24", name : "吉田"},
      {index: "23", name : "中村"}
    ];

for (let i = 0, length = arr.length; i < length; ++i) {
  $body.append($(`<div data-index="${arr[i]["index"]}">${arr[i]["name"]}</div>`)); // 毎回レンダリングはしる
}

こんな感じで毎回appendすると、毎回レンダリングされてしまうので、まとめたいと思いますよね。

まとめたバージョン

let $body = $(document.body),
    arr = [
      {index: "66", name : "岡田"},
      {index: "00", name : "高濱"},
      {index: "1", name : "清田"},
      {index: "54", name : "デスパイネ"},
      {index: "61", name : "角中"},
      {index: "44", name : "井上"},
      {index: "7", name : "鈴木"},
      {index: "24", name : "吉田"},
      {index: "23", name : "中村"}
    ],
    $df = $(document.createDocumentFragment()),
    $players;

for (let i = 0, length = arr.length; i < length; ++i) {
  $df.append($(`<div data-index="${arr[i]["index"]}">${arr[i]["name"]}</div>`));
}
          
$body.append($df);

$players = $body.find("[data-index]"); // ここがもったいない

で、僕はいままでdocumentFragmentをつかってまとめてたわけですが、
for文のなかで生成したjQueryオブジェクトの参照を持ちたいと思った時、find()で探し直すのがもったいないですよね。

まとめつつ参照も保持バージョン

let $body = $(document.body),
    arr = [
      {index: "66", name : "岡田"},
      {index: "00", name : "高濱"},
      {index: "1", name : "清田"},
      {index: "54", name : "デスパイネ"},
      {index: "61", name : "角中"},
      {index: "44", name : "井上"},
      {index: "7", name : "鈴木"},
      {index: "24", name : "吉田"},
      {index: "23", name : "中村"}
    ],
    $players = $();

for (let i = 0, length = arr.length; i < length; ++i) {
  $players = $players.add($(`<div data-index="${arr[i]["index"]}">${arr[i]["name"]}</div>`)); // appendと違って毎回再代入が必要
}
          
$body.append($players);

そこで、add()の出番です。先日教えてもらいました。これで万事OKですね。

---

https://twitter.com/ki_230/status/651331561338441729

ツイッターやってます！

jQuery3からwidth()、hight()の挙動が変わっとる！ 😲

jQuery2.Xで開発していたものを3に切り替えたら挙動が変わって、なんでだろうと思ったていたら、
width()、hight()の挙動が変わったことが原因でした。

github.com

#box {
  width: 100px; height: 100px;
  transform: scale(.5);
}

というDOMに対して、いままでだったら、

var w = $("#box").width(); => // 100

だったのに、

3からは、

var w = $("#box").width(); => // 50（scaleが計算される）

となったようです。

3でもtransform適用前の値が欲しい場合は、

var w = $("#box")[0].offsetWidth; => // 100

とすればOKです。

---

https://twitter.com/ki_230/status/651331561338441729

ツイッターやってます！

配列の重複した要素を削除して中身がユニークな配列をつくりたいぜ 😎

lodash の uniq をつかえばOK！

https://lodash.com/docs/4.17.4#uniq

var arr = [0, 1, 2, 3, 3];

みたいな配列を、

var arr = [0, 1, 2, 3, 3];

_.uniq(arr); // => [0, 1, 2, 3]

としてくれます。（破壊的）

完。

しかし、自分、lodashのようなハイカラなライブラリを使ったことがなかったので、
pushするときにユニークかどうか調べていました。

function uniqValuePush(arr, index) {
    if (!Array.isArray(arr)) {
        return;
    }
    
    if (arr.indexOf(index) === -1) {
        arr.push(index);
    }
}

こんな感じですね。

var arr = [0, 1, 2];

uniqValuePush(arr, 3); // => [0, 1, 2, 3]
uniqValuePush(arr, 3); // => [0, 1, 2, 3]
uniqValuePush(arr, 2); // => [0, 1, 2, 3]
uniqValuePush(arr, 4); // => [0, 1, 2, 3, 4]

こんな感じでつかえます。

あと、用途はあるかわかりませんが、
配列にオブジェクトをpushする際に、特定のkeyがユニークかどうかチェックする関数もよく使っています。

function uniqObjKeyPush(arr, obj, key) {
    var bool = false,
        i;

    if (!Array.isArray(arr)) {
        return;
    }
    
    i = arr.length;
    
    while(i) {
        if (bool = bool || (arr[--i][key] === obj[key])) {
            i = 0;
        }    
    }
    
    if (!bool) {
        arr.push(obj);
    }
}

var arr = [{i: 0}];

uniqObjKeyPush(arr, {i: 1}, "index"); // => [{i : 0}, {i : 1}];
uniqObjKeyPush(arr, {i: 0}, "index"); // => [{i : 0}, {i : 1}];
uniqObjKeyPush(arr, {i: 1, j: 2}, "index"); // => [{i : 0}, {i : 1}];
uniqObjKeyPush(arr, {i: 2}, "index"); // => [{i : 0}, {i : 1}, {i : 2}];

と、こんな感じです。