Question

我希望在vanilla JS中创建它，授权使用jQuery。我想使用精益JS。下面的代码快速给出了快速结果。但是对于构建，我希望它更精简。

几个恼人的因素，多个子后代，所有未知类都必须在循环内。

＆＃13;

$('.nav__adv').each(function(){

	var $el = $(this),
		$no_advert = $('.main_ad_container div a div div', $el);

	$el.filter(function() {
	    return $.trim($no_advert.text()) === "Advertise Here";
	}).css("display", "none").remove();

});

＆＃13;

任何方向/帮助/指导？

Answer 1

使用普通的Javascript。请注意，使用jQuery的优点是它可以跨浏览器工作。

＆＃13;

[].forEach.call(document.querySelectorAll(".nav__adv"), function(el) {
    var no_advert = el.querySelector(".main_ad_container div a div div");
    if(no_advert && no_advert.textContent.trim() === "Advertise Here") {
        el.parentElement.removeChild(el);
    }
});

＆＃13;

<div class="nav__adv">
    <div class="main_ad_container">
        <div>
            <a>
                <div>
                    <div>Advertise Here</div>
                </div>
            </a>
        </div>
    </div>
</div>
<div class="nav__adv">
    <div class="main_ad_container">
        <div>
            <a>
                <div>
                    <div>Leave Untouched</div>
                </div>
            </a>
        </div>
    </div>
</div>

＆＃13;

如果你想在vanilla JS中使用跨浏览器支持，这会稍微复杂一些。

Answer 2

考虑在js中编写相同的代码。虽然您不必编写它，因为jQuery使用更好和更短的语法简化它。

var no_advert = document.querySelectorAll('.nav__adv .main_ad_container div a div div');

var el2hide = Array.prototype.filter.call(no_advert, function(elem) {
  return elem.textContent.trim() === "Advertise Here";
});

Array.prototype.map.call(el2hide, function(_this){ _this.remove(); });

<div class="nav__adv">
  <div class="main_ad_container">
    <div>
      <a>
        <div>
          <div>Advertise Here</div>
        </div>
      </a>
    </div>
  </div>
</div>
<div class="nav__adv">
  <div class="main_ad_container">
    <div>
      <a>
        <div>
          <div>Leave Untouched</div>
        </div>
      </a>
    </div>
  </div>
</div>

转动这个香草JS

2 个答案: