elemento Seleccione HTML por valor de la propiedad CSS en atributo de estilo

tengo HTML así:elemento Seleccione HTML por valor de la propiedad CSS en atributo de estilo

… 
<div style="top: 252px; left: 54px;"></div> 
<div style="top: 252px; left: 162px;"></div> 
<div style="top: 288px; left: 108px;"></div> 
…

Tengo un JavaScript objeto literal de esta manera:

var pos = { top: 252, left: 54 };

deseo seleccionar el elemento con el posición que el objeto literal indica. Las posiciones son únicas, por lo que solo se seleccionará un elemento.

Gracias por responder.

Fuente

2011-07-26 Darkry

puede crear un selector personalizado aquí hay un enlace SO que ayudará a http://stackoverflow.com/questions/1180067/jquery-find-by-inline-css-attribute/1180106#1180106 – Rafay

También puede usar ' .filter' para implementar el filtrado usted mismo (use '.css' dentro' .filter'). – pimvdb

He publicado la solución correcta + muestra jsfiddle en mi publicación. – zatatatata

El crédito va al póster original aquí;

jQuery find by inline css attribute

La función es 'styleEquals' y se puede implementar como;

jQuery.extend(jQuery.expr[':'], { 
    styleEquals: function(a, i, m){ 
     var styles = $(a).attr("style").split(" ") 
     var found = false; 
     for (var i = 0; i < styles.length; i++) { 
       if (styles[i]===m[3]) { 
         found = true; 
         break; 
       } 
     } 
     return found; 
    } 
});

A continuación, puede buscar elementos por sus valores de atributo de estilo utilizando su nueva función de extensiones jquery como;

$("div:styleEquals('top=252px'):styleEquals('left:54px')");

Fuente

2011-07-26 10:21:14

Esta solución funciona, así que la elijo como la respuesta aceptada, pero en mi problema finalmente utilicé la identificación. – Darkry

Todo lo que puedo decir es ¡no hagas esto!

Si puede agregar un estilo de posición único a un div, también puede agregar fácilmente un identificador al mismo tiempo.

Utilice este identificador para seleccionar el elemento en javascript, no en el posicionamiento css.

Fuente

2011-07-26 10:17:09 BonyT

Ok. Por supuesto que puedo hacerlo, solo quería preguntar si hay alguna posibilidad de cómo hacerlo con valores CSS. – Darkry

, pero ¿por qué querrías? CSS es para diseñar elementos, ¡no para identificarlos! ¡Si mezclas los dos, estás creando una potencial pesadilla de mantenimiento! – BonyT

Pude ver por qué, ¿y si esto fuera algún tipo de juego? Y cientos de elementos fueron creados dinámicamente. No tendría sentido crear una clase de CSS por separado para cada posición desde el principio. Entonces tendría que seleccionar elementos individuales de alguna manera. He propuesto una forma de hacer esto con jQuery fuera de la caja. – knut

Uso

function findElement (top, left) { 
    return target = $('div').filter(function() { 
     var div = $(this); 
     if (parseInt(div.css('top')) == top && parseInt(div.css('left')) == left) 
      return true; 
     return false; 
    }); 
}

Ver la jsfiddle sample

Fuente

2011-07-26 10:17:47 zatatatata

Al generar estos DIV, destinarlos única con Identificación atributo. Luego puede recuperar el objeto DIV con el atributo id.

Fuente

2011-07-26 10:18:42 Raptor

Deles una clase o identificación y selecciónelas usando class/id, será mucho más rápido. De lo contrario, deberá encontrarlos todos y filtrar por valores CSS.

Fuente

2011-07-26 10:21:11

Puede hacerlo de esta manera con the jQuery JavaScript library fuera de la caja:

var pos = { top: 252, left: 54 }; 
$('div[style*="top: ' + pos.top + 'px"][style*="left: ' + pos.left + 'px"]');

Usted necesita asegurarse de utilizar el espacio en blanco de forma coherente. Si escribe:

<div style="top:252px; left:54px;"></div>

el selector propuesto no funcionará.

También puede agregar otras propiedades de CSS al atributo style utilizando mi código de ejemplo, y el orden no tendría importancia. Aquí está un ejemplo:

<div style="left: 54px; background: gray; top: 252px;"></div>

Fuente

2011-07-26 10:30:24 knut

puede seleccionar elemento de contenido del atributo de estilo (prestar atención a los espacios):

$('div[style*="top: 252px; left: 54px"]').css("color","red")

Example.

Pero, como dijo BonyT, debería poner los valores en una identificación o clase.

Fuente

2011-07-26 10:46:02 Litek

elemento Seleccione HTML por valor de la propiedad CSS en atributo de estilo

Respuesta

Cuestiones relacionadas