jQuery Finde den nächsten Eingang

Question

Ich habe Struktur wie jedes Bild unten eingegeben hat. Ich habe x Bilder auf dem Bildschirm. Jedes Bild hat eine Option

onclick="imageClicked(this)" 

Funktion erstellt Rahmen zu Bild und zeigt kollabierte Eingabe. Der Bildrand wird angezeigt, aber die Eingabe ist nicht sichtbar.

Hier `s die Funktion

function imageClicked(image) { 
    var input = $(image).closest("input"); 
    $(image).css('outline', "solid 2px #5bc0de"); 
    $(input).css("visibility", "visible"); 
    $(input).focus(); 

    $(input).focusout(function() { 
     $(image).css('outline', "0"); 
     if ($(input).val() === "0") { 
      $(input).css("visibility", "collapse"); 
     } 
    }); 
    $(image).focusout(function() { 
     if ($(input).val() === "") { 
      $(image).css('outline', "0"); 
     } 
    }); 
} 

Hier ist HTML-Struktur in Razor Ansicht

@for (int i = 0; i < Model.Boxes.Count; i++){ 
    var base64 = Convert.ToBase64String(Model.Boxes[i].Photo); 
    var imgSrc = String.Format("data:image/gif;base64,{0}", base64); 

    var imageId = Model.Boxes[i].BoxId; 
    @Html.HiddenFor(m => m.Boxes[i].BoxId)  
    <div class="col-md-2"> 
     <img src="@imgSrc" width="50%" alt="@Model.Boxes[i].Name" id="@string.Format("image{0}", imageId)" onclick="imageClicked(this)" /> 
     @Html.TextBoxFor(m => m.Boxes[i].Quantity, new { @class = "form-control", @style = "visibility: collapse; width: 50%; margin-top: 1%", @id = string.Format("input{0}", imageId) }) 
    </div> 
} 

Answer 1

Closest für die übergeordneten Elemente suchen. Hier ist die Eingabe nicht das Elternelement des Bildes. Es ist nur ein Geschwister. Zu diesem Zweck können Sie den Selektor() verwenden.

var input = $(image).siblings("input"); 

Oder Sie verwenden,

var input = $(image).closest(".col-md-2").find("input"); 

• das übergeordnete div Get (da das Bild und Eingabe unter gleichen Eltern sind)
• Dann das Kind Eingang dieses Elternteils finden