javascript - 关于使用类名称定位第一个前一个最接近元素的问题

Question

<强> Demo

您能否看一下上面的演示，并让我知道为什么我无法获取第一个最近的 - 上一个 .txtfilename 元素的 .val() 。

请尝试点击PDF按钮查看结果

 $(document).on("click", ".pdf-download", function(){
        var targetFileInput =  $(this).prev().closest(".txtfilename").val();
        alert(targetFileInput);
 });

HTML:

<div class="content hide">
    <div class="form-group">
        <input id="" name="txtfilename" type="text" placeholder="File Name" class="form-control input-md txtfilename" />
    </div>
    <div class="form-group" style="margin-top:10px !important;">
        <div class="btn-group btn-group-sm">
            <button type="button" id="chart1png" data-chart="chart1" class="btn btn-default text-center png-download">PNG</button>
            <button type="button" id="chart1pdf" data-chart="chart1" class="btn btn-default text-center pdf-download">PDF</button>
            <button type="button" id="chart1jpg" data-chart="chart1" class="btn btn-default text-center jpg-download">JPG</button>
        </div>
    </div>
</div>

谢谢

Answer 1

您使用了错误的选择器来定位所需的输入元素。使用:

 $(document).on("click", ".pdf-download", function(){
    var targetFileInput =  $(this).closest('.form-group').prev().find(".txtfilename").val();
    alert(targetFileInput);
 });

<强> Working Demo

您还可以使用:

$(this).closest('.content').find(".txtfilename").val();

<强> Approach 2 demo