Question

我需要输出为“ Order 4”。

要求：对于每个“订单”，我都会有很多DIV，而这些DIV可能没有段落标签。我想获取包含“ class3”的段落标签的最后一个DIV。

在下面的HTML中，只有4个订单，将来的DIV部分可能会增加，可能会扩展到10或20。如果last（10或20）DIV标签不包含段落标签。我必须显示警告并显示其他消息，否则我必须显示订单号，例如：订单10。每个段落标签都必须在包含“ class3”的DIV中。

例如：如果有10个DIV订单。我们只有9个订单，最后一个DIV不包含段落标签，我必须将警报显示为“无订单”

我必须在Jquery代码中使用“ class1和class2”。

正在尝试的是：首先，我要查找“ class1 class2”的最后一个DIV是否包含“ class3”，如果最后一个DIV中包含“ class3”，我正在尝试获取段落标记。

如何实现？

var lastMessageContent = $('.class1 .class2:last').html();
console.log(lastMessageContent);
//--I am getting last DIV
//var markDownExists = $(this).hasClass("markdown");
//alert(markDownExists);
if ($('.class1').parent().find('.class3').length > 0) {
  // YES, the child element is inside the parent
  console.log("yes")
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="class1">
  <div class="class2">
    <div class="class3">
      <p> Order 1</p>
    </div>
  </div>
</div>

<div class="class1">
  <div class="class2">
    <div class="class3">
      <p> Order 2</p>
    </div>
  </div>
</div>

<div class="class1">
  <div class="class2">
  </div>
</div>

<div class="class1">
  <div class="class2">
    <div class="class3">
      <p> Order 4</p>
    </div>
  </div>
</div>

Answer 1

类似这样的东西：

var $lastPInDiv = $('div > p').last();
if ($lastPInDiv.parent().is(".class3")) console.log("Yes")

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="class1">
  <div class="class2">
    <div class="class3">
      <p> Order 1</p>
    </div>
  </div>
</div>

<div class="class1">
  <div class="class2">
    <div class="class3">
      <p> Order 2</p>
    </div>
  </div>
</div>

<div class="class1">
  <div class="class2">
  </div>
</div>

<div class="class1">
  <div class="class2">
    <div class="class3">
      <p> Order 4</p>
    </div>
  </div>
</div>

Answer 2

您必须使用:last和:has()伪选择器。

var lastMessageContent= $('.class1:last:has(p)').text();
console.log(lastMessageContent);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="class1">
  <div class="class2">
    <div class="class3">
      <p class="order"> Order 1</p>
    </div>
  </div>
</div>

<div class="class1">
  <div class="class2">
    <div class="class3">
      <p class="order"> Order 2</p>
    </div>
  </div>
</div>

<div class="class1">
  <div class="class2">
  </div>
</div>

<div class="class1">
  <div class="class2">
    <div class="class3">
      <p>Order 4</p>
    </div>
  </div>
</div>

Answer 3

    if($('.class2').last().find('.class3').length>0)               //Checks whether last class2 div has class3
    {
           var text = $('.class3').last().find('p').text()         // get class3 p tag text
    }

    else
    {
              alert('Div class3 not present')
    }

Answer 4

使用此代码，希望对您有帮助

<div class="class1">
  <div class="class2">
    <div class="class3">
      <p> Order 1</p>
    </div>
  </div>
</div>

<div class="class1">
  <div class="class2">
    <div class="class3">
      <p> Order 2</p>
    </div>
  </div>
</div>

<div class="class1">
  <div class="class2">
  </div>
</div>

<div class="class1">
  <div class="class2">
    <div class="class3">
      <p> Order 4</p>
    </div>
  </div>
</div>
<script>
    $(document).ready(function(){
      var a = $('.class3').last().find('p').length;
      if(a > 0){
        //  do somthing....
      }
    });
</script>

Answer 5

我只是用3种情况创建代码段，希望对您有所帮助。谢谢

如果最后一个订单不包含<div class"class3"> 。

var lastOrder = $('.class1 .class2:last').children();
if(lastOrder.length) {
    if(lastOrder.children().length) {
        alert(lastOrder.children().text());
    } else {
        alert('No Order');
    }
} else {
    alert('No Order');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="class1">
  <div class="class2">
    <div class="class3">
      <p> Order 1</p>
    </div>
  </div>
</div>

<div class="class1">
  <div class="class2">
    <div class="class3">
      <p> Order 2</p>
    </div>
  </div>
</div>

<div class="class1">
  <div class="class2">
  </div>
</div>

<div class="class1">
  <div class="class2">
    
  </div>
</div>

如果最后一个订单不包含<p> 。

var lastOrder = $('.class1 .class2:last').children();
if(lastOrder.length) {
    if(lastOrder.children().length) {
        alert(lastOrder.children().text());
    } else {
        alert('No Order');
    }
} else {
    alert('No Order');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="class1">
  <div class="class2">
    <div class="class3">
      <p> Order 1</p>
    </div>
  </div>
</div>

<div class="class1">
  <div class="class2">
    <div class="class3">
      <p> Order 2</p>
    </div>
  </div>
</div>

<div class="class1">
  <div class="class2">
  </div>
</div>

<div class="class1">
  <div class="class2">
    <div class="class3">
      
    </div>
  </div>
</div>

如果最后一个订单包含<div class="class3">和<p> 。

var lastOrder = $('.class1 .class2:last').children();
if(lastOrder.length) {
    if(lastOrder.children().length) {
        alert(lastOrder.children().text());
    } else {
        alert('No Order');
    }
} else {
    alert('No Order');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="class1">
  <div class="class2">
    <div class="class3">
      <p> Order 1</p>
    </div>
  </div>
</div>

<div class="class1">
  <div class="class2">
    <div class="class3">
      <p> Order 2</p>
    </div>
  </div>
</div>

<div class="class1">
  <div class="class2">
  </div>
</div>

<div class="class1">
  <div class="class2">
    <div class="class3">
      <p> Order 4</p>
    </div>
  </div>
</div>

获取最后的DIV段落内容

5 个答案: