Question

如何选择不属于特定类的img标签的图像属性（src）？

这是HTML代码

<div class="content">
    <h1>Welcome to My Homepage</h1>
    <img src="#first">
    <img src="#second">    

    <p class="footer">
        <img src="#1">
        <img src="#2">
        <img src="#3">
    </p>

    <p id='test'> </p>
</div>

我已经尝试了 .not（）和：not（）选择器，但我似乎无法让它们发挥作用。如何选择不属于＆＃34;页脚＆＃34;的img标签的图像源？类。

这就是我的尝试。

<script>
    var url = [];

    $(document).ready(function(){
        $('.content').filter(function() {
            var data = $(this);
            var image = data.find('img:not(".footer")');

            image.each(function(i,el) {
                url[i] = $(el).attr('src');
                $("#test").text(url);
            });
        })
    });
</script>

Answer 1

过滤掉页脚类的子图像：

$(document).ready(function() {
  $("img").not(".footer > img").each(function() {

    console.log($(this).attr("src"));

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="content">
  <h1>Welcome to My Homepage</h1>
  <img src="#first">
  <img src="#second">
  <p class="footer">
    <img src="#1">
    <img src="#2">
    <img src="#3">
  </p>

  <p id='test'> </p>

Answer 2

@Developer有一个非常好的解决方案 - 我推荐这个。

此方法在图像列表上实现了一个过滤器 - 效果相同。虽然不太优化。

var url = [];
$(document).ready(function() {
  $('.content').filter(function() {
    var data = $(this);
    var image = data.find('img');
    image.filter( (i, el) => !$(el).parents().hasClass("footer") ).each(function(i, el) {
      console.log($(el).attr("src"));
    })
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="content">
  <h1>Welcome to My Homepage</h1>
  <img src="#first">
  <img src="#second">
  <p class="footer">
    <img src="#1">
    <img src="#2">
    <img src="#3">
  </p>

  <p id='test'> </p>

如何选择不属于某个类的属性？

2 个答案: