Разбор html-результата ajax и сравнение его значения данных с dom

Question

У меня есть ajax-вызов метода действия, который возвращает частичное представление с CarViewModel.

Возвращает ответ в следующем формате:

Honda
Lovely Car

Forde
Comfortable Car

.cshtml

<h3 data-car-id="@Model.Id">@Model.CarTitle</h3>
<p>@Model.CarDescription</p>

Ajax

success: function (data) {
    $("div").append(result);
}

Перед добавлением результата в DOM мне нужно проверить значение data-car-id, если в dom есть data-car-id с таким же значением,Я хотел бы добавить этот конкретный автомобиль по-другому к уникальному data-car-id.

Я пытаюсь решить эту проблему, так как данные возвращают сразу несколько автомобилей.Я полагаю, мне нужно как-то разобрать каждую машину в html в ее собственную переменную?

Обновлен с полным Ajax

   $.ajax({
                url: '/Home/GetData/',
                type: "GET",
                success: function (data) {
                    if (data == null) {

                    } else {
                        $(".div").append("<div class='cars'>" + data + </div>");
                    }
                }
            });

Answer 1

var out_cars=[];
var total_cars=$('.cars').find('h3').length;
for (var i = 0; i < total_cars; i++) {
	 var car_name=$('.cars').find('h3').eq(i).text();
	 var car_id=$('.cars').find('h3').eq(i).attr('data-car-id');
	 var car_desc=$('.cars').find('h3').eq(i).next().text();
	 out_cars.push({'car_name':car_name, 'car_id': car_id, 'car_desc':car_desc});
}

/* Further with the received object it is possible to do everything that you want */

console.log(out_cars);

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

<!--  After adding the information your div ('.cars')will look like this:  -->


<div class="cars">
   <h3 data-car-id="01">Honda</h3>
   <p>Lovely Car</p>

   <h3 data-car-id="02">Forde</h3>
   <p>Comfortable Car</p>
</div>