为什么我不能在jQuery中获得隐藏的字段vaule？

Question

我尝试使用以下代码获取值"/storage/emulated/0/Pictures/A1.PNG"，但结果为null，为什么？

Js代码

    $('.CssRename').click(function () {
        var fileName = GetHiddenFilename(this);                    
        alert("My: "+fileName);

    });


function GetHiddenFilename(obj) {
    return $(obj).parent().prevAll().first().val();
}

Html来源

            <li>
                <input type="hidden" value="/storage/emulated/0/Pictures/A1.PNG" />

                <div class="leftli">
                    <input type="checkbox" name="CHFile" class="FilenameCheckboxForSelect" /><span class="CssHandleKnown">A1.PNG</span> 
                </div>

                <div class="rightli">
                    <span class="CssCopy">Copy</span>
                    <span class="CssDetails">Details</span>
                    <span class="CssDownloadSingle">Download</span>
                    <span class="CssRename">Rename</span>
                    <span class="CssDeleteSingle">Delete</span>
                </div>
                <div class="middleli"><span class="fileDate">2017-03-03 10:41</span><span class="filesize">66 KB</span></div>
            </li>

此外，Html来源可以获得正确的结果

        <li>
                    <input type="hidden" value="/storage/emulated/0/Pictures/A1.PNG" />

                    <div class="rightli">
                        <span class="CssCopy">Copy</span>
                        <span class="CssDetails">Details</span>
                        <span class="CssDownloadSingle">Download</span>
                        <span class="CssRename">Rename</span>
                        <span class="CssDeleteSingle">Delete</span>
                    </div>

                    <div class="leftli">
                        <input type="checkbox" name="CHFile" class="FilenameCheckboxForSelect" /><span class="CssHandleKnown">A1.PNG</span> 
                    </div>


                    <div class="middleli"><span class="fileDate">2017-03-03 10:41</span><span class="filesize">66 KB</span></div>
                </li>

Answer 1

$('.CssRename').click(function() {

  var $this = $(this).closest("li").find("input.hidden");//this will be the idden field
  var fileName = GetHiddenFilename($this);
  alert("My: " + fileName);

});


function GetHiddenFilename(obj) {
  return $(obj).val();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <input type="hidden" class="hidden" value="/storage/emulated/0/Pictures/A1.PNG" />

    <div class="leftli">
      <input type="checkbox" name="CHFile" class="FilenameCheckboxForSelect" /><span class="CssHandleKnown">A1.PNG</span>
    </div>

    <div class="rightli">
      <span class="CssCopy">Copy</span>
      <span class="CssDetails">Details</span>
      <span class="CssDownloadSingle">Download</span>
      <span class="CssRename">Rename</span>
      <span class="CssDeleteSingle">Delete</span>
    </div>
    <div class="middleli"><span class="fileDate">2017-03-03 10:41</span><span class="filesize">66 KB</span></div>
  </li>
</ul>

更改您的选择器以立即匹配隐藏字段

1. 注意我将类添加到隐藏输入

$('.CssRename').click(function () {
        var fileName = GetHiddenFilename(this);                    
        alert("My: "+fileName);

    });


function GetHiddenFilename(obj) {
    return $(obj).closest("li").find("input[type=hidden]").val();//use attribute selector with closest
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <input type="hidden" value="/storage/emulated/0/Pictures/A1.PNG" />

    <div class="leftli">
      <input type="checkbox" name="CHFile" class="FilenameCheckboxForSelect" /><span class="CssHandleKnown">A1.PNG</span>
    </div>

    <div class="rightli">
      <span class="CssCopy">Copy</span>
      <span class="CssDetails">Details</span>
      <span class="CssDownloadSingle">Download</span>
      <span class="CssRename">Rename</span>
      <span class="CssDeleteSingle">Delete</span>
    </div>
    <div class="middleli"><span class="fileDate">2017-03-03 10:41</span><span class="filesize">66 KB</span></div>
  </li>
</ul>

1. 使用属性选择器选择隐藏字段
2. 使用.closest()和li参数选择parent li

Answer 2

$(obj).parent().prevAll().first().val(); =＆gt; $(obj).parent().siblings().first().val();

   $('.CssRename').click(function () {
        var fileName = GetHiddenFilename(this);                    
        alert("My: "+fileName);

    });


function GetHiddenFilename(obj) {
    return $(obj).parent().siblings().first().val();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <input type="hidden" class="hidden" value="/storage/emulated/0/Pictures/A1.PNG" />

    <div class="leftli">
      <input type="checkbox" name="CHFile" class="FilenameCheckboxForSelect" /><span class="CssHandleKnown">A1.PNG</span>
    </div>

    <div class="rightli">
      <span class="CssCopy">Copy</span>
      <span class="CssDetails">Details</span>
      <span class="CssDownloadSingle">Download</span>
      <span class="CssRename">Rename</span>
      <span class="CssDeleteSingle">Delete</span>
    </div>
    <div class="middleli"><span class="fileDate">2017-03-03 10:41</span><span class="filesize">66 KB</span></div>
  </li>
</ul>