Concatenate Pseudoclasses and attribute selectors - jQuery

Question

Concatenate Pseudoclasses and attribute selectors - jQuery

Navigation

#1 by (1 votes)

0

Good, maybe I'm doing a bit like a grand piano, but I'm trying to achieve, from a list that I think with many DIV, a very specific element.

Currently, what I am doing is this, but you do not recognize me:

var i = $('#listado_facturas div:nth-child(10)[data-visible="yes"]').data('item')===0?0:1;

To summarize, I do not know if I really understand what I want, I want to reach the DIV number 10 that contains a "Data-Visible" attribute equal to YES.

When I do the console.log, it does not recognize the element that I am trying to reach. And this is the only way I can think of. Because reaching it by ID is not possible for me, the position of the ID can change every time I do an operation.

I do not know if this can be done or I am making a terrible asshole. Any help will be very grateful. :)

javascript jquery

asked by José González 03.10.2017 в 13:47

source

1 answer

SQL query with 4 related tables Error trying to connect to Access from vb.net

score 1 · Accepted Answer

Try searching for all items # 10 and then ask if the item has the attribute data- visible="yes" using the function each() :

var div = $('#listado_facturas div:nth-child(10)');

console.log(div.length);

var dataVisibleDiv = [];
//recoremos cada elemento y verificamos que tenga el attributo
div.each(function(_, element){

   if($(element).data("visible") == "yes") {
     console.log("Contiene atributo");
     dataVisibleDiv.push(element);
   }
});

console.log("cantidad elemento con data-visible:" + dataVisibleDiv.length);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="listado_facturas">

 <div>div 1</div>
 <div>div 2</div>
 <div>div 3</div>
 <div>div 4</div>
 <div>div 5</div>
 <div>div 6</div>
 <div>div 7</div>
 <div>div 8</div>
 <div>div 9</div>
 <div data-visible='yes'>div 10<iv>
 <div>div 1</div>
 <div>div 2</div>
 <div>div 3</div>
 <div>div 4</div>
 <div>div 5</div>
 <div>div 6</div>
 <div>div 7</div>
 <div>div 8</div>
 <div>div 9</div>
 <div data-visible='yes'>div 10<iv>
  <div>div 1</div>
 <div>div 2</div>
 <div>div 3</div>
 <div>div 4</div>
 <div>div 5</div>
 <div>div 6</div>
 <div>div 7</div>
 <div>div 8</div>
 <div>div 9</div>
 <div>div 10<iv>
</div>