CODEWITHSUNDEEP
javascriptjquery
Zoidfarb
Zoidfarb

Reputation: 61

How to traverse jquery HTMLElement result and search for a particular span or plain text

I have a page which loads with several expanded segments which are then collapsed if they are not required. I need to determine which segment is required for other styling needs.

I'm not very good with jquery but I am able to grab the tr for the required segment. I just need help either grabbing the plain text title out of my result (Lot and Expiration) or determine if the "LotSelection/ExpSelection spans exists as they are not in any other segment. Assume the following html is what is in my javascript variable:

<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>

Upvotes: 0

Views: 46

Answers (3)

Dacre Denny
Dacre Denny

Reputation: 30370

If I understand your question correctly then you can achieve these tasks via the following:

// 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());
<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>

Upvotes: 0

Taplar
Taplar

Reputation: 24965

I would suggest flipping your logic slightly.

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

If you find the elements, and then find their parent TR, you then have which one is required. Then if you want to hide all the others that are not required, it would be something simple like:

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

Upvotes: 2

Bojan Ivanac
Bojan Ivanac

Reputation: 1180

Since you have already given the <span />s unique id's, you can use those to check if they exist or not.

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

Upvotes: 0

Related Questions