2016-09-26 4 views
0

Ich muss überprüfen, ob der Datenwert von div A den Datenwert von div B enthält, und wenn so eine Klasse auf div B angewendet wird, beachten Sie, dass es viele div B gibt.js indexOf arbeitet nicht mit Zahlen

HTML: 
<div class="a" data-num="1,2,3,4,5">div A</div> 
<div class="b" data-num="3">div B</div> 
<div class="b" data-num="6">div B</div> 
<div class="b" data-num="1">div B</div> 

JQUERY: 
$('div.b').each(function(){ 
var a_num = $('div.a').data('num'); 
var b_num = $(this).data('num'); 

if ($(a_num).indexOf(b_num)) { 
    $(this).addClass('special'); 
} 
}); 

Ich dachte, das obige würde funktionieren, aber es nicht. Hilfe? Vielen Dank.

Antwort

1

mehrere Probleme ... erste davon indexOf() immer muss -1 verglichen werden, da 0 ist ein gültiger Index ist aber auch falsy

Ihr Konzept funktionieren würde, wenn Sie einen Wert Array für div verwendet. Ansonsten sind Sie einfach Vergleiche Zeichenfolge tun und 10,11,12 würden alle einen gültigen Index zurück, wenn 1

Schließlich verwenden die Überprüfung die Daten nicht in $() wickeln. Es ist nicht dom

bezogen Sie

tun konnte
<div class="a" data-num="[1,2,3,4,5]">div A</div> 

oder konvertieren Array aktuellen Format und split()

var a_num = $('div.a').data('num').split(','); 

mit Und in beiden Fällen müssen Sie Vergleich zu -1

if (a_num.indexOf(b_num) >-1) 
verwenden
0

Sie müssen hier eine eigene Funktion erstellen Ursache indexOf wird nicht funktionieren.

function isFound(arr,num){ 
 
    fnd = false 
 
    for (n=0; n<arr.length; n++){ 
 
    var bb = parseInt(num); 
 
    var aa = arr[n]; 
 
    aa = parseInt(aa); 
 
    if (aa==bb) fnd=true; 
 
    } 
 
    return fnd; 
 
} 
 
$('div.b').each(function(){ 
 
    var aa = $('.a').data('num').split(','); 
 
    var bb = $(this).data('num'); 
 
    var tst = isFound(aa, bb); 
 
    
 
    if (tst) { 
 
    $(this).addClass('special'); 
 
    } 
 
});
.special{color:red;font-weight:bold;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="a" data-num="1,2,3,4,5">div A</div> 
 
<div class="b" data-num="3">div B</div> 
 
<div class="b" data-num="6">div B</div> 
 
<div class="b" data-num="5">div B</div>

Verwandte Themen