ricerca di jquery() equivalente per javascript

Ho tre tabelle e voglio controllare se contengono un elemento specifico, ad esempio un pulsante con il valore ‘Precedente’. Ho risolto utilizzando la funzione jquery find e la scrittura di una funzione, ma ho bisogno di risolvere questo problema senza jquery. È possibile questo?

JS:

var t1 = document.getElementById("table_one");
var t2 = document.getElementById("table_two");
var t3 = document.getElementById("table_three");

has_prev_button(t1);
has_prev_button(t2);
has_prev_button(t3);

function has_prev_button(element)
{
  var has_prev_button = false;
  var check = $(element).find("input[type=button]");
  
  for (i=0; i<=check.length-1; i++)
  {
    if (check[i].getAttribute("value") == "Previous")
    {
      has_prev_button = true;
    }
  }

  if (has_prev_button)
  {
    document.write("<p>The selected table has a Previous button</p>");
  }
  else
  {
    document.write("<strong><p style='color:red'>The selected table has NO Previous button</p></strong>");
  }
}

CSS:

table {
  margin-bottom:40px;
  border: 1px solid black;
}

td {
  border: 2px solid #D8D8D8;
  width: 70px;
}

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table_one">
  <tr>
    <td>Foo</td>
    <td>Bar</td>
  <tr>
  <tr>
    <td><input type="button" value="Previous"></td>
    <td><input type="button" value="Next"></td>
  </tr>
</table>

<table id="table_two">
  <tr>
    <td>Foo</td>
    <td>Bar</td>
  <tr>
  <tr>
    <td></td>
    <td><input type="button" value="Next"></td>
  </tr>
</table>

<table id="table_three">
  <tr>
    <td>Foo</td>
    <td>Bar</td>
  <tr>
  <tr>
    <td><input type="button" value="Previous"></td>
    <td><input type="button" value="Next"></td>
  </tr>
</table>
InformationsquelleAutor Black | 2016-07-12

 

2 Replies
  1. 10

    Utilizzare elemento .querySelectorAll:

    JS:

    var t1 = document.getElementById("table_one");
    var t2 = document.getElementById("table_two");
    var t3 = document.getElementById("table_three");
    
    has_prev_button(t1);
    has_prev_button(t2);
    has_prev_button(t3);
    
    function has_prev_button(element)
    {
      var has_prev_button = false;
      var check = element.querySelectorAll("input[type=button]");
      
      for (i=0; i<=check.length-1; i++)
      {
        if (check[i].value == "Previous")
        {
          has_prev_button = true;
        }
      }
    
      if (has_prev_button)
      {
        document.write("<p>The selected table has a Previous button</p>");
      }
      else
      {
        document.write("<strong><p style='color:red'>The selected table has NO Previous button</p></strong>");
      }
    }

    CSS:

    table {
      margin-bottom:40px;
      border: 1px solid black;
    }
    
    td {
      border: 2px solid #D8D8D8;
      width: 70px;
    }

    HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <table id="table_one">
      <tr>
        <td>Foo</td>
        <td>Bar</td>
      <tr>
      <tr>
        <td><input type="button" value="Previous"></td>
        <td><input type="button" value="Next"></td>
      </tr>
    </table>
    
    <table id="table_two">
      <tr>
        <td>Foo</td>
        <td>Bar</td>
      <tr>
      <tr>
        <td></td>
        <td><input type="button" value="Next"></td>
      </tr>
    </table>
    
    <table id="table_three">
      <tr>
        <td>Foo</td>
        <td>Bar</td>
      <tr>
      <tr>
        <td><input type="button" value="Previous"></td>
        <td><input type="button" value="Next"></td>
      </tr>
    </table>

  2. 1

    Semplicemente utilizzare documento.querySelectorAll insieme con il classi distanziati.

    Per esempio, se voglio a trovare il pulsante nella 3 ° sezione e cambiare il suo colore di sfondo:

    jQuery

    $('.my_sections').eq(2).find('.my_button').css('background', 'pink')

    Vaniglia JS

    document.querySelectorAll('.my_sections .my_button')[2].style.background = 'pink'

    Allo stesso modo, Se volevo verificare il numero di pulsanti che ho avuto del my_button classe:

    document.querySelectorAll('.my_sections .my_button').length

Lascia un commento