Как получить элемент внутри div

Question

У меня есть изображение, затем якорь, а затем div, который содержит текстовое поле. Как получить идентификатор этого текстового поля при нажатии на изображение?

Ниже мой HTML

<img src="Image/icons/preview.png" alt="Preview" id="img1" onclick="ViewHtml(this.id);" /> 

<a id="ancHeader">Header html</a> 

<div class="collapse"> 
    <textarea rows="30" cols="22" id="txtHtmlHead" class="editor"></textarea> 
</div 

Я хочу, чтобы получить идентификатор текстового поля на click.below изображения моя функция Javascript

function ViewHtml(id) { 
    $("#" + id).siblings('div.collapse first > textarea.editor').val(); 
} 

Но приведенный выше код не работает. Может ли кто-нибудь мне помочь ...?

Answer 1

Try :

function ViewHtml(id) { 
    var id = $("#" + id).siblings('div.collapse').children('textarea.editor').prop('id'); 
} 

См. jsFiddle.

Я бы порекомендовал против использования onClick. Так как вы используете JQuery, вы можете сделать это:

$('#img1').click(function() { 
    var id = $(this).siblings('div.collapse').children('textarea.editor').prop('id'); 
}); 

Установите переключатель по мере необходимости, если вам это нужно на более чем одно изображение.

Это все предполагается, что выбранный вами div всегда относится к изображению. Если в противном случае, вы можете упростить и оптимизировать это:

$('#img1').click(function() { 
    var id = $('.collapse > .editor').prop('id'); 
}); 

Answer 2

Зачем вам тяжело? Если у вас есть, что точно такую ​​же структуру и только 1 вхождение ниже поможет вам

$('img').on('click', function(){ 
    var textareaId = $('.collapse textarea').attr('id'); 
    $('.collapse textarea').val(textareaId); 
}); 

В противном случае, завернуть все это в DIV

<div id="wrapper"> 
    <img src="Image/icons/preview.png" alt="Preview" id="img1" /> 
    <a id="ancHeader">Header html</a> 
    <div class="collapse"> 
     <textarea rows="30" cols="22" id="txtHtmlHead" class="editor"></textarea> 
    </div> 
</div> 

и JQuery

$('#wrapper img').on('click', function (e) { 
    var textareaId = $(this).siblings('.collapse').children('textarea').attr('id'); 
    $('.collapse textarea').val(textareaId); 
}); 

Answer 3

Попробуйте:

$("#img1").click(function() { 
    $(".collapse textarea").attr("id"); 
}); 

DEMO

Answer 4

Я думаю, что лучше использовать атрибут данных элемента.

<img src="Image/icons/preview.png" alt="Preview" data-rel="txtHtmlHead1" id="img1" class="getHtml"/> 

<a id="ancHeader" >Header html</a> 

<div class="collapse"> 
    <textarea rows="30" cols="22" id="txtHtmlHead1" class="editor"></textarea> 
</div 

Просто управлять динамическим атрибутом data-rel. txtHtmlHead1

function ViewHtml(id) { 

    $("#" + id).siblings('div.collapse first > textarea.editor').val(); 
} 

$(document).ready(function(){ 

$(".getHtml").bind('click',function(){ 
var getTextAreaId = $(this).data('rel'); 

if(getTextAreaId != undefined){ 

    alert($("#"+getTextAreaId).val()); // your output 
    } 


}); 
}) 

Я просто заменил свой ViewHtml путем связывания его с Click события.