0
votes

Comment parcourir le résultat de jquery HTMLElement et rechercher une étendue particulière ou du texte brut

J'ai une page qui se charge avec plusieurs segments développés qui sont ensuite réduits s'ils ne sont pas nécessaires. J'ai besoin de déterminer quel segment est requis pour d'autres besoins de style.

Je ne suis pas très bon avec jquery mais je suis capable de saisir le tr pour le segment requis. J'ai juste besoin d'aide pour extraire le titre en texte brut de mon résultat (Lot et expiration) ou pour déterminer si les "LotSelection / ExpSelection s'étendent sur un autre segment. Supposons que le code HTML suivant est celui de ma variable javascript:

<td rowspan="2" class="SomeClass level0"></td>
<td class="SomeHeader level0">
<span style="height: 100%; position: relative; top: 25%">Lot and Expiration
    <span id="LotSelection">
            - 000000987
    </span>
    <span id="ExpSelection">
            - 6/2018
    </span>
</span>
    <span style="background: #3A80BB; height: 100%" class="pull-right">
    <span style="line-height:40px;color: red;padding-left:10px;" class="RequiredField">
            Required
    </span>
</span>
</td>
<td rowspan="2" class="tdMarginR level0">
    <img class="imgEx" src="/image/path.png" alt="">
    <img class="collapse-arrow" data-target="#lotDate" style="" src="/some/path.png" alt="">
</td>

javascript jquery

2 commentaires

Alors, qu'avez-vous essayé jusqu'à présent? Si vous avez le tr, ne pourriez-vous pas utiliser $ (tr) .find ('. RequiredField'). Length! == 0 pour déterminer qu'il a un élément?

La logique que j'ai utilisée était de saisir le tr qui a la classe requise. Cela m'a donné ce résultat, cependant, ce n'est pas toujours ce truc particulier qui est requis. Ce morceau de HTML est le résultat "positif" que je dois tester, pour ainsi dire

3 Réponses :

0
votes

Puisque vous avez déjà indiqué les identifiants uniques de , vous pouvez les utiliser pour vérifier s'ils existent ou non.

if($('#LotSelection').length && $('#ExpSelection').length) {
    ...do something
}

1 commentaires

@Taplar merci pour la correction. J'ai édité ma réponse.

2
votes

Je suggérerais d'inverser légèrement votre logique.

var $otherTRs = $(selectorForAllTRs).not($requiredTR);
//now do whatever with the $otherTRs

Si vous trouvez les éléments, puis trouvez leur TR parent, vous avez alors celui qui est requis. Ensuite, si vous voulez masquer tous les autres qui ne sont pas obligatoires, ce serait quelque chose de simple comme:

var $requiredTR = $('#LostSelection, #ExpSelection').closest('tr');

0 commentaires

0
votes

Si je comprends bien votre question, vous pouvez effectuer ces tâches via:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table>

  <tbody>
    <tr>
      <td rowspan="2" class="SomeClass level0"></td>
      <td class="SomeHeader level0">
        <span style="height: 100%; position: relative; top: 25%">Lot and Expiration
    <span id="LotSelection">
            - 000000987
    </span>
        <span id="ExpSelection">
            - 6/2018
    </span>
        </span>
        <span style="background: #3A80BB; height: 100%" class="pull-right">
    <span style="line-height:40px;color: red;padding-left:10px;" class="RequiredField">
            Required
    </span>
        </span>
      </td>
      <td rowspan="2" class="tdMarginR level0">
        <img class="imgEx" src="/image/path.png" alt="">
        <img class="collapse-arrow" data-target="#lotDate" style="" src="/some/path.png" alt="">
      </td>
    </tr>
  </tbody>

</table>

// The tr that you grabbed
var tr = $('tr');

// How to determine if lot/exp selection are present in tr
console.log('Row has LotSelection span:', $('#LotSelection', tr).length > 0);
console.log('Row has ExpSelection span:', $('#ExpSelection', tr).length > 0);

// How to get all text in tr header
console.log('All text in row header:', $('.SomeHeader', tr).text());

// To only extract text "Lot and Expiration":

// 1. Select the first span of .SomeHeader in tr
// 2. Clone first span so that we can safely filter out nested span elements (that 
//    we don't want text from)
const header = $('.SomeHeader span:first', tr).clone();
// 3. Filter out nested span elements to avoid collecting text for those
$('span', header).remove();
// 4. Display desired text
console.log('Only "lot and expiration" header text:', header.text());

0 commentaires