Question

如何选择所有可见span元素的文本，即那些没有ng-hide类本身或其上升的人？

输出应为：＆＃34; C＆＃34;

<div>
   <span class="ng-hide ng-binding ng-etc">
      <span>A</span>
   </span>
   <span>
      <span class="ng-hide">B</span>
      <span>C</span>
   </span>
<div>

我从这开始，但它没有检查父母：

$("div").children(":not(.ng-hide)").text();

Answer 1

使用filter()。

$('div span').filter(function() {
  return (
     $(this).children().length == 0 //span with no children
    && $(this).closest('.ng-hide').length == 0 //span with no .ng-hide or no parents with the class
  );
}).text();

alert($('div span').filter(function() {
  return (
     $(this).children().length == 0 
    && $(this).closest('.ng-hide').length == 0
  );
}).text());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <span class="ng-hide ng-binding ng-etc">
      <span>A</span>
  </span>
  <span>
      <span class="ng-hide">B</span>
  <span>C</span>
  </span>
  <div>

Answer 2

$("div span:not(.ng-hide):not:(has(*)) span:not(.ng-hide)").text();

请注意，如果此表达式返回了多个元素，则必须使用迭代器分别获取每个元素的.text（）。

Answer 3

http://api.jquery.com/not/ - 文档

您的代码中存在一些错误，正确的版本：

  $("span").not("span.ng-hide").map(function(element){
        console.log(element.text());
    })

Answer 4

var text = '';

$("div span:not(.ng-hide)").each(function(){
    if ($(this).closest('.ng-hide').length || $(this).has('.ng-hide').length)
        return;

    text += $(this).text();
});

console.log(text);

将它们全部收集到一个数组中，您可能希望将它们收集到其他数组中。

Answer 5

您可以克隆节点并删除克隆的.ng-hide后代：

＆＃13;

var c = $('div').clone();
c.find('.ng-hide').remove();
console.log(c.text().trim());  //C
c.remove();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
   <span class="ng-hide ng-binding ng-etc">
      <span>A</span>
   </span>
   <span>
      <span class="ng-hide">B</span>
      <span>C</span>
   </span>
</div>

＆＃13;

如果克隆节点在速度或内存方面过于昂贵，您可以利用Node.innerText的功能只返回可见文本。

虽然Node.innerText是非标准的，但所有浏览器都支持它，并且不太可能消失。

＆＃13;

$('div .ng-hide').hide();
console.log($('div')[0].innerText);  //C
$('div .ng-hide').show();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
   <span class="ng-hide ng-binding ng-etc">
      <span>A</span>
   </span>
   <span>
      <span class="ng-hide">B</span>
      <span>C</span>
   </span>
</div>

＆＃13;

JQuery选择没有特定类的子代

5 个答案: