Блог

Главная - Вопросы по программированию - Как извлечь определенный контент из ответа html

Как извлечь определенный контент из ответа html

#jquery

#jquery

Вопрос:

Я написал прослушиватель для кнопки, как показано ниже 

 $(document).on("click", ".btnclick", function() {

var htmlString = $("div#" id_attr_val ".Topping-details").eq(0).html(); 

console.log(htmlString);

});

Результатом приведенной выше HtmlString является 

 <h6 class="tdHeading">Regular, 50 Ml 1</h6>
<i id="topping-close"></i><img src="images/arrow-topping.png">
<section class="secclass"><a href="#">Honey with Chocolate Sauce  10 ML</a></section>
<section class="secclass"><a href="#">Honey with Carmel  10 ML</a></section>

<h6 class="tdHeading">Regular, 50 Ml 2</h6>
<i id="topping-close"></i><img src="images/arrow-topping.png">
<section class="secclass"><a href="#">Honey with Chocolate Sauce  10 ML</a></section>
<section class="secclass"><a href="#">Honey with Carmel  10 ML</a></section>

<h6 class="tdHeading">Regular, 50 Ml 3</h6>
<i id="topping-close"></i><img src="images/arrow-topping.png">
<section class="secclass"><a href="#">Honey with Chocolate Sauce  10 ML</a></section>
<section class="secclass"><a href="#">Honey with Carmel  10 ML</a></section>

Прямо сейчас я получил три строки данных, упомянутых выше

Мое требование заключается в том, что при нажатии кнопки мне нужно добавить еще одну строку всего этого (увеличивая число в строке h6), чтобы оно выглядело так, и добавьте его к существующей строке HtmlString 

 <h6 class="tdHeading">Regular, 50 Ml 4</h6>
<i id="topping-close"></i><img src="images/arrow-topping.png">
<section class="secclass"><a href="#">Honey with Chocolate Sauce  10 ML</a></section>
<section class="secclass"><a href="#">Honey with Carmel  10 ML</a></section>

Я могу получить количество последних h6, используя этот способ, но не смог продолжить, как добавить этот новый контент обратно в существующую строку HtmlString

 var n = $("div#" id_attr_val ".Topping-details h6").length ;

<h6 class="tdHeading">Regular, 50 Ml 4</h6>
<i id="topping-close"></i><img src="images/arrow-topping.png">
<section class="secclass"><a href="#">Honey with Chocolate Sauce  10 ML</a></section>
<section class="secclass"><a href="#">Honey with Carmel  10 ML</a></section>

Кто-нибудь может помочь??

Ответ №1:

Это должно сделать Div append.

 var n = $("div#" id_attr_val ".Topping-details h6").length ;
var text1 = $('.secclass a')[0].text;
var text2 = $('.secclass a')[1].text;
$("div#" id_attr_val ".Topping-details h6").parent().append('<h6 class="tdHeading">Regular, 50 Ml ' n '</h6>    <i id="topping-close"></i><img src="images/arrow-topping.png">    <section class="secclass"><a href="#"> text1  </a></section>    <section class="secclass"><a href="#"> text2  </a></section>')

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

1. Спасибо за ответ, эти два значения Мед с кармелем 10 мл и мед с шоколадным соусом 10 МЛ могут отличаться для разных компонентов, поэтому мне нужно их расширить.

2. Большое вам спасибо, но этот новый раздел добавляется ко всем предыдущим, я просто хочу добавить его в конец существующего объекта (в конце).

3. Большое вам спасибо, это то, что мне требовалось .

4. вы спасли мой день . и возможно ли динамически извлекать значения text1 и text2??

5. Большое вам спасибо, secclass может содержать n элементов, что означает, что это не исправлено.