Получить только элемент DOM с несколькими родителями - PullRequest
Новая
       0

Получить только элемент DOM с несколькими родителями

2 голосов
/ 07 февраля 2020

Итак, у меня есть элемент SVG в моем DOM-дереве, как этот: 

<svg width="1679" height="1032" viewBox="-140 -86 1679 1032">
     <g>
          <path stroke="#00c8ed" stroke-opacity="1"></path>
          <path stroke="#00c8ed" stroke-opacity="1" d="M507 38L535 32L546 9L546 -23L543 -48L554"></path>
          <path stroke="#00c8ed" stroke-opacity="1"></path>
          <path stroke="#00c8ed" stroke-opacity="1"></path>
          <path stroke="#00c8ed" stroke-opacity="1" d="M407 138L1049 169L1011 332L991"></path>
          <path stroke="#A0D5ED" stroke-opacity="0.5" d="M407 138L1049 169L1011 332L991"></path>
     </g>
</svg>

Мне нужно извлечь внутренний html из двух последних <path> элементов с его двумя верхними родителями - g и svg - вот так: 

<svg width="1679" height="1032" viewBox="-140 -86 1679 1032">
     <g>
          <path stroke="#00c8ed" stroke-opacity="1" d="M407 138L1049 169L1011 332L991"></path>
          <path stroke="#A0D5ED" stroke-opacity="0.5" d="M407 138L1049 169L1011 332L991"></path>
     </g>
</svg>

Возможно ли достичь его только с помощью JQuery? Или мне нужно разобрать его как XML, а затем удалить ненужные <path> теги?

Спасибо!

Ответы [ 2 ]

1 голос
/ 07 февраля 2020

Я добавил код в разделе сценариев ниже, чтобы получить нужные вам элементы.

Надеюсь, это поможет. 

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head></head>
<body>

<svg width="1679" height="1032" viewBox="-140 -86 1679 1032">
     <g>
          <path stroke="#00c8ed" stroke-opacity="1"></path>
          <path stroke="#00c8ed" stroke-opacity="1" d="M507 38L535 32L546 9L546 -23L543 -48L554"></path>
          <path stroke="#00c8ed" stroke-opacity="1"></path>
          <path stroke="#00c8ed" stroke-opacity="1"></path>
          <path stroke="#00c8ed" stroke-opacity="1" d="M407 138L1049 169L1011 332L991"></path>
          <path stroke="#A0D5ED" stroke-opacity="0.5" d="M407 138L1049 169L1011 332L991"></path>
     </g>
</svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
    $('svg g path').not('path:nth-last-child(2), path:last').remove();
    var svg = $('svg').wrap('<p/>').parent().html();
    $('svg').unwrap();
    console.log(svg);
</script>
</body>
</html>
1 голос
/ 07 февраля 2020

Фактически вы спрашиваете, как удалить все элементы SVG, кроме двух последних path. Для этого вы можете использовать slice() и remove(): 

var $paths = $('svg path');
$paths.not($paths.slice(-2)).remove();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg width="1679" height="1032" viewBox="-140 -86 1679 1032">
  <g>
    <path stroke="#00c8ed" stroke-opacity="1"></path>
    <path stroke="#00c8ed" stroke-opacity="1" d="M507 38L535 32L546 9L546 -23L543 -48L554"></path>
    <path stroke="#00c8ed" stroke-opacity="1"></path>
    <path stroke="#00c8ed" stroke-opacity="1"></path>
    <path stroke="#00c8ed" stroke-opacity="1" d="M407 138L1049 169L1011 332L991"></path>
    <path stroke="#A0D5ED" stroke-opacity="0.5" d="M407 138L1049 169L1011 332L991"></path>
  </g>
</svg>

Мне не нужно удалять все ненужные теги из дерева. Просто для извлечения двух последних с ними двух верхних родителей, таких как текст строки

В этом случае вы можете клонировать исходный элемент SVG, удалить из него элементы path в памяти, а затем получить HTML. Попробуйте это: 

var $svgClone = $('svg').clone();
var $paths = $svgClone.find('path');
$paths.not($paths.slice(-2)).remove();
var html = $svgClone[0].outerHTML;
console.log(html);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg width="1679" height="1032" viewBox="-140 -86 1679 1032">
  <g>
    <path stroke="#00c8ed" stroke-opacity="1"></path>
    <path stroke="#00c8ed" stroke-opacity="1" d="M507 38L535 32L546 9L546 -23L543 -48L554"></path>
    <path stroke="#00c8ed" stroke-opacity="1"></path>
    <path stroke="#00c8ed" stroke-opacity="1"></path>
    <path stroke="#00c8ed" stroke-opacity="1" d="M407 138L1049 169L1011 332L991"></path>
    <path stroke="#A0D5ED" stroke-opacity="0.5" d="M407 138L1049 169L1011 332L991"></path>
  </g>
</svg>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...