1
votes

Comment sélectionner tout le HTML visible

J'essaie d'utiliser jQuery pour sélectionner tous les éléments, et les enfants récursifs de ces éléments qui ne sont pas masqués.

Certaines sélections qui ne fonctionnent pas sont les suivantes:

$ ("# content"). find (": visible")

$ ("# content"). children (). not (": hidden") code>

$ ("# content div: visible, #content span: visible")

Voici un exemple de html sur lequel je travaillerais avec:

<div id="content">
    <div>AAA</div>
    <div>CCC
        <div>DDD</div>
        <div>FFF
            <div>HHH</div>
        </div>
        <span>III
            <span>KKK</span>
        </span>
    </div>
    <div>MMM</div>
</div>

Ce que je veux que mon sélecteur sélectionne est ceci:

<div id="content">
    <div>AAA</div>
    <div style="display: none;">BBB</div>
    <div>CCC
        <div>DDD</div>
        <div style="display: none;">EEE</div>
        <div>FFF
            <div style="display: none;">GGG</div>
            <div>HHH</div>
        </div>
        <span>III
            <span style="display: none;">JJJ</span>
            <span>KKK</span>
        </span>
    </div>
    <div style="display: none;">LLL</div>
    <div>MMM</div>
</div>

Donc, si un élément ou ses enfants , ou petits-enfants, ou arrière-petits-enfants, etc., contiennent un élément qui a diplay: none , je veux que ce ou ces éléments soient exclus de la sélection.

javascript jquery html

2 commentaires

Votre HTML doit d'abord être valide. Vous ne pouvez pas imbriquer un div dans une étendue

ok, corrigé ça.

3 Réponses :

2
votes

Essayez-le - le filtre est également une bonne idée

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content">
  <div>AAA</div>
  <div style="display: none;">BBB</div>
  <div>CCC
    <div>DDD</div>
    <div style="display: none;">EEE</div>
    <div>FFF
      <div style="display: none;">GGG</div>
      <div>HHH</div>
    </div>
    <span>III
            <span style="display: none;">JJJ</span>
    <span>KKK</span>
    </span>
  </div>
  <div style="display: none;">LLL</div>
  <div>MMM</div>
</div>

var $content = $('<div/>').html($("#content")).clone(1)
$content.find("*").each((_, ele) => {
  if (ele.style.display === "none") $(ele).remove()
})
console.log($content.html())

2 commentaires

Que diriez-vous des descendants des éléments parents ayant display: none ?

Et eux? Ils ne seraient pas visibles

0
votes

Voici deux méthodes:

if ($('div, span').is(':visible')) {
  // your code here
}

if ($('div, span').css('display') !== 'none') {
  // your code here
}

0 commentaires

0
votes

$('#content').find('*').each(function(res,a){
    if($(this).css('display')=='none'){
        $(this).remove();
    }
});

0 commentaires