CODEWITHSUNDEEP
javascriptjqueryhtml
user5245837
user5245837

Reputation:

How to count li in jquery without image and via attribute

I have this code . .

I have 3 li . . How can i count li that has no image and div style color is #c9c9c9?

in my case i have 1 li that has no image and div style color is #c9c9c9

so the output should be 1

I don't have idea if this is possible.

This is my code:

<ul id="room_1">
        <li>
            <div class="wrap participantlist wrap_body" style="color:#000000">
                <img src="images/leader.png">
            </div>
        </li>
        <li>
            <div class="wrap participantlist wrap_body" style="color:#c9c9c9">
            </div>
         </li>
         <li>
            <div class="wrap participantlist wrap_body" style="color:#000000">
            </div>
         </li>
    </ul>

This is my js:

alert($("ul li .wrap_body").length);

Upvotes: 3

Views: 58

Answers (2)

guest271314
guest271314

Reputation: 1

Try using .filter() , is()

var li = $("#room_1 li").filter(function() {
  return $("> div[style=color\\:#c9c9c9]", this).is(function() {
    return !$("img", this).is("*")
  })
})
console.log(li.html(), li.length)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="room_1">
  <li>
    <div class="wrap participantlist wrap_body" style="color:#000000">
      <img src="images/leader.png">
    </div>
  </li>
  <li>
    <div class="wrap participantlist wrap_body" style="color:#c9c9c9">
    </div>
  </li>
  <li>
    <div class="wrap participantlist wrap_body" style="color:#000000">
    </div>
  </li>
</ul>

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388326

Checking the color style is an issue, to get lis without image you can use the not and has() like

var $liswoimg = $('li').not(':has(img)');
snippet.log($liswoimg.length)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

<ul id="room_1">
  <li>
    <div class="wrap participantlist wrap_body" style="color:#000000">
      <img src="images/leader.png">
    </div>
  </li>
  <li>
    <div class="wrap participantlist wrap_body" style="color:#c9c9c9"></div>
  </li>
  <li>
    <div class="wrap participantlist wrap_body" style="color:#000000"></div>
  </li>
</ul>

But if you can use the style attribute value then

var $liswoimg = $('li:has(div[style="color:#c9c9c9"])').not(':has(img)');
snippet.log($liswoimg.length)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

<ul id="room_1">
  <li>
    <div class="wrap participantlist wrap_body" style="color:#000000">
      <img src="images/leader.png">
    </div>
  </li>
  <li>
    <div class="wrap participantlist wrap_body" style="color:#c9c9c9"></div>
  </li>
  <li>
    <div class="wrap participantlist wrap_body" style="color:#000000"></div>
  </li>
</ul>

Upvotes: 4

Related Questions