クリックした要素から近いdata属性の値を取得(children使用)

要素をクリックしたら、クリックした直近要素のdata属性の値を取り出したい。

 

通常data属性の値を取得するには、

$(‘要素’).data();

と書きます。普通にこう書けばいいのですが、今回はたまたまchildrenを使う機会に恵まれたので、そのメモです。

クリックで特定の要素のdata属性の値を取得

実際のコードはこんな感じです。

____html_____________

<div class=”js-click”>
<i class=”icon” data-id=”sample1(この値が欲しい)“></i>
</div>


・(foreachで繰り返し出力)


<div class=”js-click”>
<i class=”icon” data-id=”sample10″></i>
</div>

以下はjQueryのコード
$(‘.js-click’).on(‘click’, function(){
var $this = $(this);
var $getId = $this.children().data(‘productid’);
console.log( $getId ); //クリックした要素のdataの中身が入る
}
クラス属性 .js-clickをクリックすると、そのドムが 変数 $this に入り、
$this.children().data(‘productid’);
の部分で「その子要素のdata属性の’productid’を取得」させ、その中身を変数$getIdに入れる。
という流れになります。無事、任意のdataの中身を取得できました。

toggleClassも使ってみる

また、toggleClassと連動させたい場合。
HTMLはさっきのコードと同じですが、.js-clickをクリックすると、その子要素のiconクラスにだけactiveクラスをつけたり外したりしたいです。

____html_____________

<div class=”js-click”>
<i class=”icon (ここにactiveクラスを付け外ししたい)” data-id=”sample1″></i>
</div>


・(foreachで繰り返し出力)


<div class=”js-click”>
<i class=”icon” data-id=”sample10″></i>
</div>

jQueryはこんな感じです。

$(‘.js-click’).on(‘click’, function(){
var $this = $(this);
$this.children(‘.icon’).toggleClass(‘active’);
}

これで、任意の子要素にある icon クラスに active クラスをつけたりはずしたりできました!!

補足

closest・parent は直近の親要素を探すのでこの場合は当てはまらず、siblings ・findも結果はundefindになってしまい、data属性の値をとることができませんでした(今回の構造では)。

 

タイトルとURLをコピーしました