CODEWITHSUNDEEP
javascriptjqueryhtml
executable
executable

Reputation: 3600

How to get value depending on child value

console.log($('.tree-node > .tree-title:contains(Statistics)').parents('li > ul > li:nth-child(2) > ul > li:nth-child(1) > div > .tree-title ').val())
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li>
    <div class="tree-node">
      <span class="tree-hit"></span>
      <span class="tree-icon"></span>
      <span class="tree-title">Nop</span>
    </div>
</li>
<li>
    <div class="tree-node">
      <span class="tree-hit"></span>
      <span class="tree-icon"></span>
      <span class="tree-title">Statistics</span>
    </div>
    <ul style="display: block;">
        <li>
            <div class="tree-node">
              <span class="tree-indent"></span>
              <span class="tree-hit"></span>
              <span class="tree-icon"></span>
              <span class="tree-title">Cumulative</span>
            </div>
            <ul style="display:block">
                <li>
                    <div class="tree-node">
                      <span class="tree-icon"></span>
                      <span class="tree-title">137</span>
                    </div>
                </li>
                <li>
                    <div class="tree-node">
                      <span class="tree-icon"></span>
                      <span class="tree-title">138</span>
                    </div>
                </li>
            </ul>
        </li>
        <li>
            <div class="tree-node">
              <span class="tree-indent"></span>
              <span class="tree-hit"></span>
              <span class="tree-icon"></span>
              <span class="tree-title">Current</span>
            </div>
            <ul style="display:block">
                <li>
                    <div class="tree-node">
                      <span class="tree-icon"></span>
                      <span class="tree-title">149</span>
                    </div>
                </li>
                <li>
                    <div class="tree-node">
                      <span class="tree-icon"></span>
                      <span class="tree-title">150</span></div>
                </li>
            </ul>
        </li>
    </ul>
</li>

I'm trying to get the value 149 depending on child value, in this case I want to go only if <span class="tree-title">Statistics</span> is set. In my jQuery code, I'm getting undefined

Upvotes: 0

Views: 41

Answers (1)

Tom Faltesek
Tom Faltesek

Reputation: 2818

You were close. See my example below with careful navigating from child/parent element.

UPDATE: Changed example to select all Current values.

var currentNodes = $('.tree-node > .tree-title:contains(Statistics)')
  .parents('li:first') // Find the first parent <li> from Statistics
  .find('.tree-title:contains(Current)') // Find a child with Current
  .parents('li:first') // Find the first parent <li> from Current
  .find('ul > li .tree-title'); // Find the .tree-title nodes within a <ul>

// currentNodes is now a collection of .tree-title elements.

// You can traverse the list with a loop.
currentNodes.each(function(i, item) {
  console.log(`Value ${i}: ${item.innerHTML}`);
});

// You can select specific elements from the list by index.

console.log('This is the second value: ', currentNodes[1].innerHTML);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li>
    <div class="tree-node">
      <span class="tree-hit"></span>
      <span class="tree-icon"></span>
      <span class="tree-title">Nop</span>
    </div>
</li>
<li>
    <div class="tree-node">
      <span class="tree-hit"></span>
      <span class="tree-icon"></span>
      <span class="tree-title">Statistics</span>
    </div>
    <ul style="display: block;">
        <li>
            <div class="tree-node">
              <span class="tree-indent"></span>
              <span class="tree-hit"></span>
              <span class="tree-icon"></span>
              <span class="tree-title">Cumulative</span>
            </div>
            <ul style="display:block">
                <li>
                    <div class="tree-node">
                      <span class="tree-icon"></span>
                      <span class="tree-title">137</span>
                    </div>
                </li>
                <li>
                    <div class="tree-node">
                      <span class="tree-icon"></span>
                      <span class="tree-title">138</span>
                    </div>
                </li>
            </ul>
        </li>
        <li>
            <div class="tree-node">
              <span class="tree-indent"></span>
              <span class="tree-hit"></span>
              <span class="tree-icon"></span>
              <span class="tree-title">Current</span>
            </div>
            <ul style="display:block">
                <li>
                    <div class="tree-node">
                      <span class="tree-icon"></span>
                      <span class="tree-title">149</span>
                    </div>
                </li>
                <li>
                    <div class="tree-node">
                      <span class="tree-icon"></span>
                      <span class="tree-title">150</span></div>
                </li>
            </ul>
        </li>
    </ul>
</li>

Upvotes: 2

Related Questions