es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Alternativa al selector de contains.

21 May, 2023 Programación

Pregunta

Tengo una lista de modelos de vehículos y me gustaría mostrar los tipos asociados. Como selector he escrito los tipos en un campo de datos. Ahora quiero ocultar con la clase d-none todos los elementos de lista que no coincidan con la selección.

Esto funciona con mi código actual. El problema es que también obtengo “Example Type 3” mostrado en este ejemplo. Pero solo quiero tener “Example Type 2”.

¿Cómo puedo hacer para que solo se muestre el segundo elemento aquí pero aún así pueda buscar “E-Tron S” o “E-Tron GT”?

Mi JavaScript hasta ahora:

    let searchText = "E-Tron";

    containerItems = contentContainer.querySelectorAll('li[data-custom-field-filter-name^="Typ"]:not([data-custom-field-model*="' + searchText + '"])');

    containerItems.forEach(function (el) {
        el.classList.add('d-none');
    });

Lista HTML:

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Puedes utilizar el método includes() para verificar si el searchText está incluido en el atributo data-custom-field-model. Si no está incluido, puedes añadir la clase d-none al elemento de la lista.

    let searchText = "E-Tron";

containerItems = contentContainer.querySelectorAll('li[data-custom-field-filter-name^="Typ"]');

containerItems.forEach(function (el) 
    if (!el.dataset.customFieldModel.includes(searchText)) 
        el.classList.add('d-none');

);

Comments are closed.