El JQuery «ha» método eficaz selecciona todos los elementos que han determinado descendientes.

Quiero para seleccionar elementos basados en el hecho de que tienen particular antepasados. Yo sé acerca de los padre([selector]) y los padres([selector]), pero estos seleccione los padres y no los hijos con los padres.

Por lo que hay un ancestro equivalente de «ha»?

Nota: ya tengo el contexto de un elemento más abajo en la jerarquía y voy a ser la selección basado en esto así que no se puede hacer un «top down» de la consulta.

Actualización

He obviamente explicó a mí mismo muy mal aquí, así que voy a intentar aclarar:

<ul class="x">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>
<ul class="y">
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

Tengo un objeto jQuery que ya se compone de elementos de 2,3,4 y 5. Quiero seleccionar aquellos elementos que tienen un padre con la clase = x.

Esperanza de que tiene más sentido.

10 Comentarios

  1. 71

    Para una limpieza reutilizables solución, considere la posibilidad de ampliar la jQuery.fn objeto con un método personalizado se utiliza para determinar la presencia de un determinado antepasado de cualquier elemento dado:

    //Extend jQuery.fn with our new method
    jQuery.extend( jQuery.fn, {
        //Name of our method & one argument (the parent selector)
        within: function( pSelector ) {
            //Returns a subset of items using jQuery.filter
            return this.filter(function(){
                //Return truthy/falsey based on presence in parent
                return $(this).closest( pSelector ).length;
            });
        }
    });

    Esto se traduce en un nuevo método, $.fn.within, que podemos utilizar para filtrar nuestros resultados:

    $("li").within(".x").css("background", "red");

    Esto selecciona todos los elementos de la lista en el documento y, a continuación, filtros para que sólo aquellos que han .x como un antepasado. Debido a que este utiliza jQuery internamente, se podría pasar de una forma más complicada: selector

    $("li").within(".x, .y").css("background", "red");

    Esto va a filtrar la colección de artículos que descienden desde .x o .y, o ambos.

    Violín: http://jsfiddle.net/jonathansampson/6GMN5/

    • este es el «top down» estoy tratando de evitar como ya tengo el elemento que desee comenzar con. Eso es lo que intentaba explicar en mi última nota. Supongamos que ya tenemos la segunda y la tercera se extiende en la lista en una variable jquery, ¿cómo se puede filtrar aún más a esa lista?
    • Si he entendido correctamente, Chris, mi perpended actualización de direcciones.
    • No estoy muy familiarizado con el método de filtro. basado en mi edición, ¿todavía crees que esto ayudaría?
    • Simpson: a Juzgar por sus ediciones (y Jonathan), yo tendría que decir que sí. Suponiendo que reemplazar .parent con .x que es.
    • Uso return !!$(p).find(this).length; para realmente volver true y false.
    • usted debe utilizar los padres() ……… if($(«li»).los padres(«.x»).length == 1){ hacer algo };

  2. 41

    if ( $('.foo').parents('.parentSelector').length ) { //has parent }

    • esto solo sería realmente el trabajo de un solo elemento. Quiero seleccionar todos los niños con padres que cumplen determinados criterios. Pero yo ya tengo un objeto jquery para seleccionar desde el que está más abajo en la jerarquía (si esto tiene sentido)
    • ¿por qué este sólo para un solo elemento? Si su selectores son correctos, usted debería estar bien. Mi código de arriba se lee «para todo de los elementos con la clase ‘foo’, encontrar a sus padres con la clase ‘parentSelector’ y el retorno que jQuery colección». Tal vez me estoy perdiendo algo … proporcionar un ejemplo?
    • usted está diciendo: «si mi elemento tiene una coincidencia de los padres, hacer algo». Quiero decir «en base a esta lista de elementos, me da una lista de los elementos que tienen padres que coincidan con un criterio particular»
    • +1 me gusta esta solución, el mejor de todos. jQuery realmente debe agregar hasParent() a su API, sin embargo.
    • o hasAncestor()
  3. 36

    Si entiendo tu pregunta correctamente, esto haría:

    $.fn.hasAncestor = function(a) {
        return this.filter(function() {
            return !!$(this).closest(a).length;
        });
    };
    
    $('.element').hasAncestor('.container').myAction();
    
    <div class="container">
      <span>
        <strong class="element">strong</strong>
      </span>
    </div>
    • ya que este valor filtros de los padres, en lugar de devolver true/false te sugiero cambiar el nombre withAncestor o filterAncestor. Si yo fuera un código de lectura que yo esperaría hasAncestor para devolver un valor booleano
    • …aunque tal vez lo dicho ya que jQuery core tiene un ‘tiene ()’, que se comporta de la misma, pero por descendientes. api.jquery.com/has
    • Por otro lado, hasClass() devuelve un booleano… me Recuerda a uno de los dos cosas difíciles en ciencias de la computación
    • Estrictamente hablando, esta aplicación no es correcta, como closest() también coincide con el elemento seleccionado actualmente. Es decir, $('.element').hasAncestor('.element'); siempre va a volver en sí. La función de pasar a filter lugar, debe volver !!$(this).parent().closest(a).length.
  4. 8
    $('body').hasParent('html') //true
    
    $('div#myDiv').hasParent($('body')) //true

    #API:

    //check if current element has parent element 'e' 
    $.fn.hasParent = function (e) {
        return !!$(this).parents(e).length
    }
    • No creo que el signo de exclamación debería estar allí.
    • O al menos deberían ser el doble de exclamaciones «!!» para emitir el resultado a un valor booleano.
    • La filosofía está relacionada con los siguientes JS regla : – «0» es considerado como «falso» en la lógica de predicados .
    • Lo que quiero decir, es que esta instrucción return es revertir el resultado (probablemente tratando de lanzar la int boolean)
  5. 2

    Usted puede utilizar realmente filter directamente (sin necesidad de una llamada de función closest) y tendrá un mejor rendimiento. Sólo tiene que utilizar un selector de que coincida con los elementos contenidos dentro de .x:

    $("li").filter(".x *")

    esto también difiere ligeramente de la closest soluciones sugeridas por otros en los que no coinciden si el elemento en sí, tiene la clase dada, pero sólo si es dentro de un elemento con la clase.

    Si la coincidencia de un elemento con la clase que se desea así, esto podría ser ligeramente modificado:

    $("li").filter(".x, .x *")

    JS:

    $("li").filter(".x *").css("background", "red");

    HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <ul class="x"><li>1</li><li>2</li><li>3</li></ul>
    <ul class="y"><li>4</li><li>5</li><li>6</li></ul>

  6. 1

    Probar este

    ul.myList > li > a

    Este selector selecciona sólo los enlaces que son hijos directos de la lista de elementos, que son
    a su vez hijos directos de los elementos que tienen la clase milista.

  7. 0

    La forma más fácil es este:

    //all children of a specific parent match
    $('parentSelector').children();
    
    //All children matching a specific pattern, one level deep
    $('parentSelector > childSelector');
    //or
    //$('parentSelector').children('childSelector');
    
    //All children matching a specific pattern, multiple levels deep
    $('parentSelector childSelector');
    //or
    //$('parentSelector').find('childSelector');

    o ¿usted realmente necesita algo más complicado que eso?

    Edit: Si usted ya tiene un elemento, esto se puede combinar con el padre() comando, así:

    myElement.parents('parentSelector').find('childSelector'); //Will include self
    • agregó ejemplo de html a la pregunta que puede explicar las cosas un poco mejor
  8. 0
    object.each(function(){
        element = $(this);
        if(element.parent().hasClass("x")){
            //do stuff
        }
    });

    esto afectará a todos los elementos en el objeto que tiene el padre .x

Dejar respuesta

Please enter your comment!
Please enter your name here