Question

如果使用unique id selector不存在Javascript/Jquery，我需要如何访问元素值。
我在下面解释我的代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-6" style="height: 100%;border-right: 1px solid;">
  <div style="text-align: center; border-bottom:1px solid;">
    <p class="lead">New Student Registration</p>
    <a href="institute_list.php?type=REGISTRATION" id="btnRegistration"><img src="assets/img/registration.jpg" height="120" width="180" /></a>
  </div>
  <div style="text-align: center">
    <p class="lead">Online Admission</p>
    <a href="institute_list.php?type=ADMISSION" id="btnAdmission"><img src="assets/img/admission.jpg" height="120" width="180" /></a>
  </div>
</div>
<div class="col-sm-6" style="padding-top: 70px;">
  <div style="text-align: center;">
    <p class="lead">Registered User Login</p>
    <a href="build/index.php" target="_blank" id="btnAdmission"><img src="assets/img/login.png" height="150" width="150" /></a>
  </div>
</div>

此处如果我想从p标记i.e-Online Admission或其中p标记值中获取值，即使没有任何此类{ {1}}。

Answer 1

这里如果我想获得p标签的价值，即在线入场

如果想获得第一个p的值，则只需使用querySelector

var output = document.querySelector("p.lead").textContent;

var output = document.querySelector("p.lead").textContent;

console.log(output);

<div class="col-sm-6" style="height: 100%;border-right: 1px solid;">
  <div style="text-align: center; border-bottom:1px solid;">
    <p class="lead">New Student Registration</p>
    <a href="institute_list.php?type=REGISTRATION" id="btnRegistration"><img src="assets/img/registration.jpg" height="120" width="180" /></a>
  </div>
  <div style="text-align: center">
    <p class="lead">Online Admission</p>
    <a href="institute_list.php?type=ADMISSION" id="btnAdmission"><img src="assets/img/admission.jpg" height="120" width="180" /></a>
  </div>
</div>
<div class="col-sm-6" style="padding-top: 70px;">
  <div style="text-align: center;">
    <p class="lead">Registered User Login</p>
    <a href="build/index.php" target="_blank" id="btnAdmission"><img src="assets/img/login.png" height="150" width="150" /></a>
  </div>
</div>

或者，如果您想获得其他p.lead的值，那么您可以使用p的索引作为选择器

如果想获得第一个p的值，则只需使用eq

var output = $("p.lead:eq(0)").textContent; //New Student Registration

var output = $("p.lead:eq(1)").textContent; //Online Admission

Answer 2

您可以在div中使用find。

＆＃13;

$('div').find('p').each(function (index, element) {
console.log($(this).text());
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-6" style="height: 100%;border-right: 1px solid;">
  <div style="text-align: center; border-bottom:1px solid;">
    <p class="lead">New Student Registration</p>
    <a href="institute_list.php?type=REGISTRATION" id="btnRegistration"><img src="assets/img/registration.jpg" height="120" width="180" /></a>
  </div>
  <div style="text-align: center">
    <p class="lead">Online Admission</p>
    <a href="institute_list.php?type=ADMISSION" id="btnAdmission"><img src="assets/img/admission.jpg" height="120" width="180" /></a>
  </div>
</div>
<div class="col-sm-6" style="padding-top: 70px;">
  <div style="text-align: center;">
    <p class="lead">Registered User Login</p>
    <a href="build/index.php" target="_blank" id="btnAdmission"><img src="assets/img/login.png" height="150" width="150" /></a>
  </div>
</div>

＆＃13;

Answer 3

通过使用map函数，您将逐个获得p.lead值的所有值。试试吧：

$('p.lead').map(function () {
    $(this).text();
});

Answer 4

因为，您需要p元素的内容，所以为什么不简单地使用元素选择器来选择所有p元素，然后循环到它并获取其文本内容。< / p>

$('p').each(function(){
  var pContent = $(this).text();
  console.log(pContent);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-6" style="height: 100%;border-right: 1px solid;">
<div style="text-align: center; border-bottom:1px solid;">
<p class="lead">New Student Registration</p>
<a href="institute_list.php?type=REGISTRATION" id="btnRegistration"><img src="assets/img/registration.jpg" height="120" width="180"/></a>
   </div>
    <div style="text-align: center">
    <p class="lead">Online Admission</p>
    <a  href="institute_list.php?type=ADMISSION" id="btnAdmission"><img src="assets/img/admission.jpg" height="120" width="180"/></a>
    </div>
</div>
<div class="col-sm-6" style="padding-top: 70px;">
    <div style="text-align: center;"> 
        <p class="lead">Registered User Login</p>
        <a href="build/index.php" target="_blank" id="btnAdmission"><img src="assets/img/login.png" height="150" width="150" /></a>
    </div>
</div>

Answer 5

您也可以尝试

  var x = document.querySelectorAll("p");
  console.log(x[1].innerHTML);

var x = document.querySelectorAll("p");
console.log(x[1].innerHTML);

<div class="col-sm-6" style="height: 100%;border-right: 1px solid;">
  <div style="text-align: center; border-bottom:1px solid;">
    <p class="lead">New Student Registration</p>
    <a href="institute_list.php?type=REGISTRATION" id="btnRegistration"><img src="assets/img/registration.jpg" height="120" width="180" /></a>
  </div>
  <div style="text-align: center">
    <p class="lead">Online Admission</p>
    <a href="institute_list.php?type=ADMISSION" id="btnAdmission"><img src="assets/img/admission.jpg" height="120" width="180" /></a>
  </div>
</div>
<div class="col-sm-6" style="padding-top: 70px;">
  <div style="text-align: center;">
    <p class="lead">Registered User Login</p>
    <a href="build/index.php" target="_blank" id="btnAdmission"><img src="assets/img/login.png" height="150" width="150" /></a>
  </div>
</div>

如果使用Javascript / Jquery不存在任何唯一ID，我可以获取元素值吗？

5 个答案: