Блог

Главная - Вопросы по программированию - Получить содержимое последнего абзаца DIV

Получить содержимое последнего абзаца DIV

#jquery #html #css

#jquery #HTML #css

Вопрос:

Мне нужен вывод как «Порядок 4».

Требование: у меня будет много разделов для каждого «заказа», которые могут иметь или не иметь тег paragraph. Я хочу получить последний DIV тега абзаца, который содержит «class3».

В приведенном ниже HTML-формате всего 4 порядка, в будущем количество разделов DIV может увеличиться, то есть оно может увеличиться до 10 или 20. Если последний (10 или 20) тег DIV не содержит тега paragraph. я должен показать оповещение с каким-либо сообщением, иначе я должен показать номер заказа, например: Заказ 10. Каждый тег абзаца должен быть в DIV, который содержит «class3» .

Пример: ЕСЛИ имеется 10 разделов заказов. у нас всего 9 заказов, а последний DIV не содержит тега paragraph, я должен отображать предупреждение как «Нет заказа»

Я должен использовать «class1 и class2» в коде Jquery.

Что я пытаюсь: сначала я нахожу последний DIV «class1 class2», независимо от того, содержит он «class3» или нет, если «class3» содержится в последнем DIV, я пытаюсь получить тег paragraph.

Как этого добиться?

 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>

Комментарии:

1. Пожалуйста, используйте <> инструмент snippet, чтобы мы могли видеть, как вы запускаете свой код, в настоящее время мы не знаем, запускаете ли вы свой jquery, когда страница готова или когда вы нажимаете что-то или другую опцию.

Ответ №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>

Комментарии:

1. Да, это лучшее решение, поскольку op всегда будет уверен в получении последнего абзаца и без риска получить что-либо еще.

2. Но, если в последнем блоке div нет тега p, то это решение не будет работать.

3. Это зависит от того, должен ли p быть в последнем div или ему нужен последний p в любом div3

4. @HareshVidja в вопросе недостаточно информации, чтобы оправдать понижение.

Ответ №2:

Вы должны использовать селекторы :last и :has() psudo.

 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>

Комментарии:

1. Спасибо, это сработало с «var lastMessageContent = $(‘.class1:last p’).html(); console.log(lastMessageContent);»

2. Проверьте мою правку на лучшее решение… если вы получите правильное решение, не пропустите, отметьте как правильное и проголосуйте.

Ответ №3:

Я просто создаю фрагмент кода с 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>

Ответ №4:

     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')
    }

Ответ №5:

используйте этот код, я надеюсь, это поможет вам 

 <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>

Комментарии:

1. Пожалуйста, отредактируйте свой пост. Похоже, это не решает проблему