jquery：如何获得属于两个不同父类的类的值？

Question

我需要获取两个不同父类 - 具有文件和无文件的特定类的值。没有文件的父类应该有样式“display：block”。这里是我的示例代码段 -

<table> 
<tr> 
    <td> 
     <div class="no-file" style="display:block;"> 
      <span class="file-name">No file selected</span> 
     </div> 
    </td> 
</tr> 
<tr> 
    <td> 
     <div class="has-file"> 
      <span class="file-name">abc.jpg</span> 
     </div> 
     <div class="no-file" style="display:none;"> 
      <span class="file-name">No file selected</span> 
     </div> 
    </td> 
</tr> 
<tr> 
    <td> 
     <div class="has-file"> 
      <span class="file-name">def.png</span> 
     </div> 
     <div class="no-file" style="display:none;"> 
      <span class="file-name">No file selected</span> 
     </div> 
    </td> 
</tr> 
<tr> 
    <td> 
     <div class="no-file" style="display:block;"> 
      <span class="file-name">No file selected</span> 
     </div> 
    </td> 
</tr> 
    </table> 

我想要的输出是 -

No file selected 
abc.jpg 
def.png 
No file selected 

Answer 1

JSFIDDLE

JQUERY

$("table tr").each(function (i, v) { 
    $("#container").append($(v).find("span.file-name:eq(0)").text() + "<br>"); 
}); 

这种方式，每个表行您将获得第一个跨度为的跨度，忽略第二个（如果存在）。

请注意，假设包含文件名称（abc.jpg）的div始终位于No file selected div之前（如果存在）。

Answer 2

这里有一种方法来制作您指定的输出与由换行符分隔值的字符串：

var values = $(".no-file").filter(function() { 
       return $(this).css("display") === "block"; 
      }).add(".has-file") 
      .children(".file-name") 
      .map(function() { 
       return $(this).text(); 
      }).get().join("\n"); 

演示：http://jsfiddle.net/h3P8U/

和无文件父类有风情“显示：块“

这是另一种不能表达的方式LY测试为display:block但不会测试可见：

var values = $(".no-file,.has-file").filter(":visible") 
      .children(".file-name") 
      .map(function() { 
       return $(this).text(); 
      }).get().join("\n"); 

演示：http://jsfiddle.net/h3P8U/1/

无论哪种方式，如果你想要的值作为一个数组，而不是一个换行符加入字符串只是省略.join()电话...