0

Es la primera vez que trabajo con jQuery. Estoy usando una librería de react para crear un árbol, pero el problema de usar la librería para agregar una clase es que necesito trabajar con la librería de jQuery.

Mi problema es que, como se puede ver en la foto, puede haber dos identificadores con el mismo número, por lo que la clase tree-hover del árbol se agrega dos veces en el árbol.

Como puede ver en mi código, lo primero que hago es eliminar todas las clases tree-hover del árbol que existan.

Luego busco el elemento con la identificación más cercana a la etiqueta para agregar la clase tree-hover a la etiqueta.

Pero como hay dos elementos con el mismo id, agrega la clase tree-hover dos veces.

Mi código es el siguiente:

selectTreeHoverClass = id => {
    const numberId = parseInt(id);
    $(".tree-hover").removeClass("tree-hover");
    $("[hid='" + numberId + "']").closest("label").addClass(" tree-hover");
}; 

Pero creo que la forma más optima es buscar el elemento pasándole el id y su tipo, los cuales pueden ser: "hierarchy" o "dma".

El problema es que el siguiente código no me encuentra el label más cercano:

 $("[hid='" + `${numberId}-${type}`+ "']").closest("label").addClass(" tree-hover");

¿Cómo puedo obtener el label más cercano pasándole el id y el tipo mediante jQuery?

Os pongo una captura del html que genera.

Gracias

introducir la descripción de la imagen aquí

4
  • Hola Javier, veo de entrada que tienes dos problemas: 1. Los identificadores siempre deben ser únicos en la página, de otro modo su uso no tiene sentido y generará errores. 2. No deberías mezclar React + jQuery. Dicho esto: busca la forma de hacer los identificadores únicos y la forma que tiene React para hacer lo que necesites, descarta el uso de jQuery en este caso.
    – Orici
    Commented el 13 may. 2020 a las 9:50
  • Lo sé, pero la maldita librería para crear el árbol no me permite accedes a ella mientras se construye.Y si te das cuenta, en cierta manera los identificadores son "únicos" ya que uno es de la jerarquíe xxx-1-hierarchy y el otro es del árbol xxxx-1-dma
    – Javier
    Commented el 13 may. 2020 a las 9:53
  • Ya lo he solucionado :)
    – Javier
    Commented el 13 may. 2020 a las 10:26
  • Comparte como has solucionado, así ayudas a futuros visitantes del sitio que tengan un problema similar al tuyo.
    – DjCrazy
    Commented el 13 may. 2020 a las 12:34

1 respuesta 1

0

Al final para diferenciar posibles duplicidades de ids numéricos también añado el tipo como yo pensaba.

A la hora de crear los labels compruebo si son de tipo "dma" o "hierarhcy" y se lo añado al campo hid.

<span
  className="pr-notif"
  hid={data.type === "hierarchy" ? `${data.id}-hierarchy` : `${data.id}-dma`}
  onClick={(e) => this.clickElement(data, e)}
>
  {data.olabel}
</span>

Luego ya, a la hora de buscar pues busco por el campo numérico más el tipo.

selectTreeHoverClass = (id, type) => {
    const numberId = parseInt(id);
    const item = numberId + "-" + type;
    $(".tree-hover").removeClass("tree-hover");
    $("[hid='" + item + "']").closest("label").addClass(" tree-hover");
};

Se que no es la mejor no es usar la librería esa porque me obliga a importar la librería jQuery.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.