如何在Javascript或jQuery中获取子类值？

Question

我希望得到班级＆＃34; fileDate＆＃34;的价值（例如：2017-03-03 10:41）。当我单击按钮＆＃39; CssDetails＆＃39;，但以下代码无法返回正确的结果时，如何编写jQuery代码？谢谢！

Js档案

 $('.CssDetails').click(function () {
      var fileDate=  $(this).parent().siblings("class='middleli']").childs("class='fileDate']").val();
      alert(fileDate);  
  });

Html代码

   <ul class="ul-file">
            <section class="files">
                <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>
                <li>
                    <input type="hidden" value="/storage/emulated/0/Pictures/A2.PNG" />
                    <div class="leftli">
                        <input type="checkbox" name="CHFile" class="FilenameCheckboxForSelect" /><span class="CssHandleKnown">A2.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>
            </section>
        </ul>

Answer 1

$('.CssDetails').click(function() {
  var fileDate = $(this).closest('.rightli').next('.middleli').find(".fileDate").text();
  alert(fileDate);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="ul-file">
  <section class="files">
    <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>
    <li>
      <input type="hidden" value="/storage/emulated/0/Pictures/A2.PNG" />
      <div class="leftli">
        <input type="checkbox" name="CHFile" class="FilenameCheckboxForSelect" /><span class="CssHandleKnown">A2.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>
  </section>
</ul>

1. 使用.text()代替.val()
2. 同样在选择器中使用nearest（）来获取父.rightli，它是.middleli的兄弟，fileDate的父亲，您可以使用.find()

Answer 2

  

为了获得节点的孩子，你可以使用   $('Selector').find('Selector')方法

如果我理解正确，这将解决您的问题

以下是您的代码中的问题： -

1. 为了找到课程，您可以在课前使用.，无需使用$('class[class-name]')

2. 为了获得节点的孩子，您可以使用$('Selector').find('Selector')方法

3. 要在div中获取内容，您可以使用text()方法
＆＃13;
＆＃13;
$('.CssDetails').click(function() {
  var fileDate = $(this).parent().siblings(".middleli").find(".fileDate").text();
  alert(fileDate);
});
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="ul-file">
  <section class="files">
    <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>
    <li>
      <input type="hidden" value="/storage/emulated/0/Pictures/A2.PNG" />
      <div class="leftli">
        <input type="checkbox" name="CHFile" class="FilenameCheckboxForSelect" /><span class="CssHandleKnown">A2.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:43</span>
        <span class="filesize">66 KB</span>
      </div>
    </li>
  </section>
</ul>
＆＃13;
＆＃13;
＆＃13;

Answer 3

利用closest和find。此外，li元素没有val()属性，但text()属性

$('.CssDetails').click(function () {
      var fileDate=  $(this).closest('.rightli').next('.middleli').find('.fileDate').text();
      alert(fileDate);
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="ul-file">
            <section class="files">
                <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>
                <li>
                    <input type="hidden" value="/storage/emulated/0/Pictures/A2.PNG" />
                    <div class="leftli">
                        <input type="checkbox" name="CHFile" class="FilenameCheckboxForSelect" /><span class="CssHandleKnown">A2.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>
            </section>
        </ul>

Answer 4

您需要更改选择器。请尝试以下方法：

＆＃13;

＆＃13;

$('.CssDetails').click(function () {
      var fileDate=  $(this).parent().siblings('div.middleli').find('span.fileDate').text();
      console.log(fileDate);  
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="ul-file">
            <section class="files">
                <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>
                <li>
                    <input type="hidden" value="/storage/emulated/0/Pictures/A2.PNG" />
                    <div class="leftli">
                        <input type="checkbox" name="CHFile" class="FilenameCheckboxForSelect" /><span class="CssHandleKnown">A2.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>
            </section>
        </ul>

＆＃13;

＆＃13;

＆＃13;