Wie erhält man den Datenwert, wenn man mit jQuery auf Kinder von Eltern klickt?

Question

Ok, also versuche ich das Datenattribut vom Eltern-Div zu bekommen, anstatt es von jedem Anker zu bekommen. Ich habe versucht, am nächsten zu verwenden, aber das funktioniert nicht. Hier ist mein folgender Code.

<div class="cat black"> 
    <a class="cat_col" data-color="black">Tom</a> 
    <a class="cat_col" data-color="black">Cotton</a> 
    <a class="cat_col" data-color="black">Major</a> 
</div> 

und dies ist die jQuery-Code ich habe:

$('body').on('click', '.cat_col', function(event) { 
    event.preventDefault(); 
    var $CatColor = $(this).data("color");     
    getCats ($showCategory); 
}); 

Ich habe kein Problem damit, aber wenn ich die Dinge beginnen, bevölkern, wird es ein wenig verwirrend, und es wird mehr Optionen sein. Also habe ich mich gefragt, ob es möglich ist, die Daten von der Eltern-Div statt von jedem Kind zu bekommen. Also, mach sowas.

<div class="cat black" data-color="black"> 
    <a class="cat_col">Tom</a> 
    <a class="cat_col">Cotton</a> 
    <a class="cat_col">Major</a> 
</div> 

$('body').on('click', '.cat_col', function(event) { 
    event.preventDefault(); 
    var $CatColor = $(this).closest.data("color");     
    getCats ($showCategory); 
}); 

Was mache ich falsch? oder ist das einfach unmöglich?

Answer 1

Sie müssen angeben, welches Element am nächsten ist

$('body').on('click', '.cat_col', function(event) { 
    event.preventDefault(); 
    var $CatColor = $(this).closest('.cat').attr('data-color');     
    getCats ($showCategory); 
}); 

Answer 2

Wenn ich Sie richtig verstehe, können Sie die Farbe aus dem übergeordneten div erhalten möchten, wenn so die Eltern() -Funktion wie folgt:

$('body').on('click', '.cat_col', function(event) { 
    event.preventDefault(); 
    var $CatColor = $(this).parent().data("color");     
    console.log($CatColor); 
}); 

Hier ist ein fiddle.

Answer 3

$('body').on('click', '.cat_col', function(event) { 
    event.preventDefault(); 
    var $CatColor = $(this).parent().data("color"); 
    alert($CatColor); 
    getCats ($showCategory); 
}); 

Answer 4

Sie können auch closest("div") auch

$('body').on('click', '.cat_col', function(event) { 
 
    event.preventDefault(); 
 
    var $CatColor = $(this).closest("div").data("color");     
 
    alert($CatColor); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="cat black" data-color="black"> 
 
    <a class="cat_col">Tom</a> 
 
    <a class="cat_col">Cotton</a> 
 
    <a class="cat_col">Major</a> 
 
</div>