jQuery 从某些子类中删除 标签

Question

我想删除 <a>来自某些类的标签。这是我的 html:

<div class="my_class">
    <div class="sub_class">
        <p class="percent">0%</p>
    </div>
    <div>
        <div id="my_links_1">
            <p class="my_url"><a href="#">my link 1</a></p>
            <p class="my_url"><a href="#">my link 2</a></p>
        </div>
    </div>
    <div class="sub_class">
        <p class="percent">50%</p>
    </div>
    <div>
        <div id="my_links_2">
            <p class="my_url"><a href="#">my link 3</a></p>
            <p class="my_url"><a href="#">my link 4</a></p>
        </div>
    </div>
    <div class="sub_class">
        <p class="percent">50%</p>
    </div>
    <div>
        <div id="my_links_3">
            <p class="my_url"><a href="#">my link 5</a></p>
            <p class="my_url"><a href="#">my link 6</a></p>
        </div>
    </div>
    <div class="sub_class">
        <p class="percent">100%</p>
    </div>
    <div>
        <div id="my_links_4">
            <p class="my_url"><a href="#">my link 7</a></p>
            <p class="my_url"><a href="#">my link 8</a></p>
        </div>
    </div>
</div>

所以，我想要的是删除所有 <a>标签，但百分比为 50%。我尝试使用此代码，但它删除了所有 <a>标签。

$.each($('.percent'), function (index, value) { 
    var per = $(value).text();
    if(per != "50%"){
        $(".my_url").find("a").contents().unwrap();
    }
});

Answer 1

您需要为此使用适当的选择器:
检查下面的代码段

$('.percent').each(function() {
  var per = $(this).text();
  if (per != "50%") {
    $(this).parent('div').next().find(".my_url").find("a").contents().unwrap();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my_class">
  <div class="sub_class">
    <p class="percent">0%</p>
  </div>
  <div>
    <div id="my_links_1">
      <p class="my_url"><a href="#">my link 1</a>
      </p>
      <p class="my_url"><a href="#">my link 2</a>
      </p>
    </div>
  </div>
  <div class="sub_class">
    <p class="percent">50%</p>
  </div>
  <div>
    <div id="my_links_2">
      <p class="my_url"><a href="#">my link 3</a>
      </p>
      <p class="my_url"><a href="#">my link 4</a>
      </p>
    </div>
  </div>
  <div class="sub_class">
    <p class="percent">50%</p>
  </div>
  <div>
    <div id="my_links_3">
      <p class="my_url"><a href="#">my link 5</a>
      </p>
      <p class="my_url"><a href="#">my link 6</a>
      </p>
    </div>
  </div>
  <div class="sub_class">
    <p class="percent">100%</p>
  </div>
  <div>
    <div id="my_links_4">
      <p class="my_url"><a href="#">my link 7</a>
      </p>
      <p class="my_url"><a href="#">my link 8</a>
      </p>
    </div>
  </div>
</div>