Antecedentes del problema
Estoy tratando de agregar un popover a cada elemento con clase .param-value . Quiero hacer esto a través de JQuery para hacerlo más SECO.
Tema
¿Cómo puedo hacer que el atributo data-content igual al contenido del elemento?
Por ejemplo
<p class="param-value" [...] data-content="Example Data 1">Example Data 1</p>lo que he probado
He intentado usar $(this).html() pero como no es un controlador de eventos, creo que no puedo obtener esta información.
HTML
<div class="param-row row"> <div class="col-3"><p class="param-name">Example Label 1</p></div> <div class="col-3"><p class="param-value">Example Data 1</p></div> <div class="col-3"><p class="param-name">Example Label 2</p></div> <div class="col-3"><p class="param-value">Example Data 2</p></div> </div> <div class="param-row row"> <div class="col-3"><p class="param-name">Example Label 3</p></div> <div class="col-3"><p class="param-value">Example Data 3</p></div> <div class="col-3"><p class="param-name">Example Label 4</p></div> <div class="col-3"><p class="param-value">Example Data 4</p></div> </div>JS
$(function () { $('[data-toggle="popover"]').popover({'trigger':'hover'}) }) $('.param-value').attr('data-container','body') $('.param-value').attr('data-toggle','popover') $('.param-value').attr('data-placement','bottom') $('.param-value').attr('data-html','true') $('.param-value').attr('data-content',$(this).html())JSFDDLE
Puede pasar una función como segundo parámetro al método attr y dentro de esa función $(this) será una referencia al elemento actual y luego puede usar $(this).html()
$(function() { $('[data-toggle="popover"]').popover({ 'trigger': 'hover' }) }) $('.param-value').attr('data-container', 'body') $('.param-value').attr('data-toggle', 'popover') $('.param-value').attr('data-placement', 'bottom') $('.param-value').attr('data-html', 'true') $('.param-value').attr('data-content', function() { return $(this).html() }) <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> <div class="param-row row"> <div class="col-3"> <p class="param-name">Example Label 1</p> </div> <div class="col-3"> <p class="param-value">Example Data 1</p> </div> <div class="col-3"> <p class="param-name">Example Label 2</p> </div> <div class="col-3"> <p class="param-value">Example Data 2</p> </div> </div> <div class="param-row row"> <div class="col-3"> <p class="param-name">Example Label 3</p> </div> <div class="col-3"> <p class="param-value">Example Data 3</p> </div> <div class="col-3"> <p class="param-name">Example Label 4</p> </div> <div class="col-3"> <p class="param-value">Example Data 4</p> </div> </div>Pude resolver esto con each() de JQuery. Al igual que:
$('.param-value').each(function() { $(this).attr('data-content',$(this).html()) })Si hay una solución más elegante, házmelo saber.