在jquery中通过类名获取值答案

【问题标题】：Get value by class name in jquery在jquery中通过类名获取值
【发布时间】：2020-02-03 15:02:50
【问题描述】：

我想在 jquery 中按类名获取文本。我已经创建了一个函数来按类名获取元素的文本，但是通过这个函数，我得到了我使用同一个类的三个元素的所有文本。我想获取数组中的文本，例如 x[0] 或 x[1] 等。请帮帮我。

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
      $(document).ready(function(){
        $("#hide").click(function(){
          myfunction();

        });

        function myfunction(index) {
          var x = $(".check").text();

          $("#demo").text(x);}
      });
    </script>
  </head>
  <body>
    <div id="main">
      <p class="check">If you click on the "Hide"</p>
      <p class="check">button, I will disappear.</p>
      <p class="check">If you click on the "Hide" button</p>
    </div>
    <p id="demo">"Hide" button</p>
    <button id="hide">Hide</button>
    <button id="show">Show</button>

  </body>
</html>

【问题讨论】：

这能回答你的问题吗？ How to get value by class name in JavaScript or jquery?

标签： jquery

【解决方案1】：

您可以创建一个数组并通过使用.each() 对其进行迭代来推送每个元素的text() 在需要的地方使用该数组。

$(document).ready(function(){
  $("#hide").click(function(){
  myfunction();
  });

  function myfunction(index) {
  var array = [];
  var x = $(".check").each(function(){array.push($(this).text())});
  console.log(array);
  $("#demo").text(array);}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div id="main">
<p class="check">If you click on the "Hide"</p>
<p class="check">button, I will disappear.</p>
<p class="check">If you click on the "Hide" button</p>
</div>
<p id="demo">"Hide" button</p>
<button id="hide">Hide</button>
<button id="show">Show</button>

【讨论】：

【解决方案2】：

您可以使用 .each() jquery 函数并将每个段落保存在一个数组中。运行代码以查看结果。希望这个答案是您正在寻找的：

$(document).ready(function(){
  $("#hide").click(function(){
    myfunction();
  });

  function myfunction(index) {
    var x = [];
    $(".check").each(function() {
       x.push($(this).text());
    });
    $("#demo1").text(x[0]);
    $("#demo2").text(x[1]);
    $("#demo3").text(x[2]);
  }
});

#main{
border-bottom: 1px solid #ccc;
}

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

<div id="main">
<p class="check">If you click on the "Hide"</p>
<p class="check">button, I will disappear.</p>
<p class="check">If you click on the "Hide" button</p>
</div>
<p id="demo1">first check</p>
<p id="demo2">second check</p>
<p id="demo3">third check</p>
<button id="hide">Hide</button>
<button id="show">Show</button>

【讨论】：

【解决方案3】：

你可以这样解决这个问题

 //Declare an Array
    var data=[];
   /**
     * Extract data from array element
     */
    var mydata = $(".check").each(function()
    {
    data.push(
    $(this).text())
    });

   //You can access your first p tag element 
    console.log(data[0]);

【讨论】：