first - parent jquery

Encontrar la identificación de un div principal usando Jquery

Question

Tengo algunos html como este:

<div id="1">
    <p>
        Volume = <input type="text" />
        <button rel="3.93e-6" class="1" type="button">Check answer</button>
    </p>
    <div></div>
</div>

y algunas JS como esta:

$("button").click(function () {
    var buttonNo = $(this).attr(''class'');
    var correct = Number($(this).attr(''rel''));

    validate (Number($("#"+buttonNo+" input").val()),correct);
    $("#"+buttonNo+" div").html(feedback);
});

Lo que realmente me gustaría es si no tuviera que tener la clase = "1" en el botón (sé que las clases numéricas no son válidas, ¡pero esto es un WIP!), Por lo que podría determinar buttonNo basado en el id del padre div En la vida real, hay varias secciones que se ven así.

1. ¿Cómo puedo encontrar la identificación del div para criar el botón?

2. ¿Cuál sería una forma más semántica de almacenar la respuesta en el código del botón? ¡Quiero que esto sea tan infalible como sea posible para que un programador no lo copie y pegue sin romper cosas!

Answer 1

1.

$(this).parent().attr("id");

2.

¡Debe haber una gran cantidad de formas! Uno podría ser para ocultar un elemento que contiene la respuesta, por ejemplo

<div>
    Volume = <input type="text" />
    <button type="button">Check answer</button>
    <span style="display: hidden">3.93e-6&lt;/span>
    <div></div>
</div>

Y luego tenga un código jQuery similar al anterior para captar eso:

$("button").click(function () 
{
    var correct = Number($(this).parent().children("span").text());
    validate ($(this).siblings("input").val(),correct);
    $(this).siblings("div").html(feedback);
});

tenga en cuenta que si coloca la respuesta en el código del cliente, entonces puede verlo :) La mejor manera de hacerlo es validando el lado del servidor, pero para una aplicación con alcance limitado esto puede no ser un problema.

Answer 2

Esto puede hacerse fácilmente haciendo:

$(this).closest(''table'').attr(''id'');

Adjuntas esto a cualquier objeto dentro de una tabla y te devolverá el ID de esa tabla.

Answer 3

Jquery tiene un método .parents () para mover el árbol DOM y puedes comenzar allí.

Si estás interesado en hacer esto de una manera más semántica, no creo que usar el atributo REL en un botón sea la mejor manera de definir semánticamente "esta es la respuesta" en tu código. Yo recomendaría algo en esta línea:

<p id="question1">
    <label for="input1">Volume =</label> 
    <input type="text" name="userInput1" id="userInput1" />
    <button type="button">Check answer</button>
    <input type="hidden" id="answer1" name="answer1" value="3.93e-6" />
</p>

y

$("button").click(function () {
    var correctAnswer = $(this).parent().siblings("input[type=hidden]").val();
    var userAnswer = $(this).parent().siblings("input[type=text]").val();
    validate(userAnswer, correctAnswer);
    $("#messages").html(feedback);
});

No estoy seguro de cómo funcionan sus validaciones y comentarios, pero se entiende la idea.

Answer 4

Para obtener la identificación del div principal:

$(buttonSelector).parents(''div:eq(0)'').attr(''id'');

Además, puedes refactorizar tu código bastante:

$(''button'').click( function() {
 var correct = Number($(this).attr(''rel''));
 validate(Number($(this).siblings(''input'').val()), correct);
 $(this).parents(''div:eq(0)'').html(feedback);
});

Ahora no hay necesidad de una clase de botón

explicación
eq (0), significa que seleccionará un elemento del objeto jQuery, en este caso el elemento 0, por lo tanto, el primer elemento. http://docs.jquery.com/Selectors/eq#index
$ (selector) .siblings (siblingsSelector) seleccionará todos los hermanos (elementos con el mismo padre) que coincidan con los hermanos Selector http://docs.jquery.com/Traversing/siblings#expr
$ (selector) .parents (parentsSelector) seleccionará todos los elementos primarios de los elementos que coincidan con el selector que coincida con el selector principal. http://docs.jquery.com/Traversing/parents#expr
Por lo tanto: $ (selector) .parents (''div: eq (0)''); coincidirá con el primer div principal de los elementos que coinciden con el selector.

Debería echarle un vistazo a los documentos jQuery, particularmente a los selectores y al desplazamiento:

• http://docs.jquery.com/
• http://docs.jquery.com/Selectors
• http://docs.jquery.com/Traversing

Answer 5

Prueba esto:

$("button").click(function () {
    $(this).parents("div:first").html(...);
});

Answer 6

Puede usar la delegación de eventos en el div principal. O use el método closest para encontrar el padre del botón.

El más fácil de los dos es probablemente el más cercano.

var id = $("button").closest("div").prop("id");

Answer 7

find () y closer () parece un poco más lento que:

$(this).parent().attr("id");

Answer 8

http://jsfiddle.net/qVGwh/6/ Comprueba esto

   $("#MadonwebTest").click(function () {
    var id = $("#MadonwebTest").closest("div").attr("id");
    alert(id);
    });

Answer 9

$(this).parents(''div'').attr(''id'');