クラスからインデックスを取得する方法

特定のdivにカーソルを置くと、そのdivに関する特定のテキストが表示されるシステムを作成しようとしています。各divは同じクラスにあり、対応するインデックスを持つ別のdivに情報があります。私はそれぞれのdivの隠れた情報を表示するために、各divの上にカーソルを置いてクラスのインデックスを取得できる方法があるかどうか疑問に思っていました。（隠された情報divを表示することによって）。クラスからインデックスを取得する方法

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script> 
 
var allPeople = []; 
 

 
function win (name, info){ 
 
\t this.name = name; 
 
\t this.info = info; 
 
} 
 

 
allPeople[0] = new win ("Shelly", "Is Cool"); 
 
allPeople[1] = new win ("Brandon", "Likes to golf"); 
 
allPeople[2] = new win ("Steve", "Plays Football"); 
 
allPeople[3] = new win ("Mia", "Is a good cook"); 
 

 
var i = 0; 
 
$('document').ready(function(){ 
 
\t for (i = 0; i < allPeople.length; i++){ 
 
\t \t $("body").append("<div class='people'> " + allPeople[i].name +" </div>"); 
 
\t \t 
 
\t } 
 
\t for (i = 0; i < allPeople.length; i++){ 
 
\t \t $("body").append("<div class='info'> " + allPeople[i].info +" </div>"); 
 
\t } 
 
}); 
 

 
</script> 
 
<style> 
 
body { 
 
\t background-color: lightblue; 
 
} 
 
div { 
 
\t background-image: url("http://themes.wdfiles.com/local--files/semi-trans/semi-transbgtransparent.png"); 
 
\t color: white; 
 
\t padding: 2%; 
 
\t margin: 2%; 
 
\t border: 3px white solid; 
 
} 
 
.info { 
 
\t display: none; 
 
\t border-color: red; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 

 

 

 
</body> 
 
</html>

出典

2017-07-28 SirLucidus

なぜあなた 'div'は' dataset'属性をタグ与えていませんか？ forループのインデックス 'i'を使用して' dataset'の値を取得し、クエリセレクタを使用して関連する 'info'クラスをターゲットにします。より簡単な方法は、ホバートされた要素をタグ付けし、 '.next（）'を使って 'info'を取得することです。 – NewToJS

のではなく、いくつかの人と他人あるのdivの線形セットを持つ情報、あなたはネストでき、それに対応する人々との情報は、あなたがCSSで正しい情報を標的にすることができるので、DIVです。

HTML：

<div class="people-container"> 
    <div class="people">Shelly</div> 
    <div class="info">Is Cool</div> 
</div>

はCSS：誰かが人の名前の上に置いたときに

.people-container:hover .info { 
    display: block; 
}

ので、情報を表示することができます。

出典

2017-07-28 17:28:32 Auroratide

data-index属性を使用して、インデックスをdivに出力するのが最も簡単で簡単です。

$("body").append("<div class='people' data-index="+ i +"> " + allPeople[i].name +" </div>");

以降簡単な解決策のようなデータ属性として作成時に各div要素のインデックスを保存するに基づくことができる

console.log($(e.target).data('index'))

出典

2017-07-28 17:30:25 jagzviruz

とデータ属性値を取得する：

$("body").append("<div class='people' data-index='" + i +"'> " + allPeople[i].name +" </div>");

var allPeople = []; 
 

 
function win (name, info){ 
 
    this.name = name; 
 
    this.info = info; 
 
} 
 

 
allPeople[0] = new win ("Shelly", "Is Cool"); 
 
allPeople[1] = new win ("Brandon", "Likes to golf"); 
 
allPeople[2] = new win ("Steve", "Plays Football"); 
 
allPeople[3] = new win ("Mia", "Is a good cook"); 
 

 
var i = 0; 
 
$('document').ready(function(){ 
 
    for (i = 0; i < allPeople.length; i++){ 
 
     $("body").append("<div class='people' data-index='" + i +"'> " + allPeople[i].name +" </div>"); 
 

 
    } 
 
    for (i = 0; i < allPeople.length; i++){ 
 
     $("body").append("<div class='info' data-index='" + i +"'> " + allPeople[i].info +" </div>"); 
 
    } 
 
    $('.people').hover(function(e) { 
 
     $('.info').eq($(this).data('index')).show(); 
 
    }, function(e) { 
 
     $('.info:visible').hide(); 
 
    }); 
 
});

body { 
 
    background-color: lightblue; 
 
} 
 
div { 
 
    background-image: url("http://themes.wdfiles.com/local--files/semi-trans/semi-transbgtransparent.png"); 
 
    color: white; 
 
    padding: 2%; 
 
    margin: 2%; 
 
    border: 3px white solid; 
 
} 
 
.info { 
 
    display: none; 
 
    border-color: red; 
 
}

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

あなたがjQuery.index()を使用することができます。

var allPeople = []; 
 

 
function win (name, info){ 
 
    this.name = name; 
 
    this.info = info; 
 
} 
 

 
allPeople[0] = new win ("Shelly", "Is Cool"); 
 
allPeople[1] = new win ("Brandon", "Likes to golf"); 
 
allPeople[2] = new win ("Steve", "Plays Football"); 
 
allPeople[3] = new win ("Mia", "Is a good cook"); 
 

 
var i = 0; 
 
$('document').ready(function(){ 
 
    for (i = 0; i < allPeople.length; i++){ 
 
     $("body").append("<div class='people'> " + allPeople[i].name +" </div>"); 
 

 
    } 
 
    for (i = 0; i < allPeople.length; i++){ 
 
     $("body").append("<div class='info'> " + allPeople[i].info +" </div>"); 
 
    } 
 
    $('.people').hover(function(e) { 
 
     $('.info').eq($(this).index() % 4).show(); 
 
    }, function(e) { 
 
     $('.info').eq($(this).index() % 4).hide(); 
 
    }); 
 
});

body { 
 
    background-color: lightblue; 
 
} 
 
div { 
 
    background-image: url("http://themes.wdfiles.com/local--files/semi-trans/semi-transbgtransparent.png"); 
 
    color: white; 
 
    padding: 2%; 
 
    margin: 2%; 
 
    border: 3px white solid; 
 
} 
 
.info { 
 
    display: none; 
 
    border-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

異なるアプローチがDIVの対応するインデックスを取得するために、配列要素（Array.prototype.filter()）をフィルタリングに基づくことができます。

var allPeople = []; 
 

 
function win (name, info){ 
 
    this.name = name; 
 
    this.info = info; 
 
} 
 

 
allPeople[0] = new win ("Shelly", "Is Cool"); 
 
allPeople[1] = new win ("Brandon", "Likes to golf"); 
 
allPeople[2] = new win ("Steve", "Plays Football"); 
 
allPeople[3] = new win ("Mia", "Is a good cook"); 
 

 
var i = 0; 
 
$('document').ready(function(){ 
 
    for (i = 0; i < allPeople.length; i++){ 
 
     $("body").append("<div class='people'> " + allPeople[i].name +" </div>"); 
 

 
    } 
 
    for (i = 0; i < allPeople.length; i++){ 
 
     $("body").append("<div class='info'> " + allPeople[i].info +" </div>"); 
 
    } 
 
    $('.people').hover(function(e) { 
 
     var txt = this.textContent.trim(); 
 
     var peopleInfoIDX = 0; 
 
     allPeople.forEach(function(ele, idx) { 
 
      if (ele.name == txt) 
 
       peopleInfoIDX = idx; 
 
     }); 
 
     $('.info').eq(peopleInfoIDX).show(); 
 
    }, function(e) { 
 
     $('.info:visible').hide(); 
 
    }); 
 
});

body { 
 
    background-color: lightblue; 
 
} 
 
div { 
 
    background-image: url("http://themes.wdfiles.com/local--files/semi-trans/semi-transbgtransparent.png"); 
 
    color: white; 
 
    padding: 2%; 
 
    margin: 2%; 
 
    border: 3px white solid; 
 
} 
 
.info { 
 
    display: none; 
 
    border-color: red; 
 
}

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

出典

2017-07-28 17:33:37 gaetanoM

とてもいいです！ '.index（）'については考えていなかったので、将来私はそれを念頭に置いておきます。 +1 – NewToJS

@NewToJSありがとうございました。 – gaetanoM

クラスからインデックスを取得する方法

答えて

関連する問題