どのように文字列またはHTML

Question

内の同じ連続した要素がある場合のは、私は今、この文字列

<div id="ch">abcdefg<img /><img />hij</div> 
<div id="ad">abc<img />defg<img />hij</div> 

strHtml = $('div#ch').html(); 
strHtmlFalse = $('div#ad').html(); 

があるとしましょうチェックするには2つの「IMG」要素が発見された場合、それらがあるかどうかを確認するために可能な方法があります連続する兄弟。

chConImg = checkConsecutiveImg(strHtml) //true 
chConImgFalse = checkConsecutiveImg(strHtmlFalse) //false 


checkConsecutiveImg(str){ 
    if(consecutive img elements are found) 
     return true; 
    else 
     return false; 
} 

Answer 1

バニラJavascriptのアプローチ

function checkConsecutiveImage(str) { 
 
    const parent = document.querySelector(str); 
 
    const children = parent.children; 
 
    const image = Array.from(children).find(elem => elem.tagName === 'IMG'); 
 
    
 
    return image.nextSibling.nodeType === 1 && image.nextElementSibling.tagName === 'IMG' 
 
} 
 

 
console.log(`Consecutive images in #ch: ${checkConsecutiveImage('#ch')}`); 
 

 
console.log(`Consecutive images in #ad: ${checkConsecutiveImage('#ad')}`);

<div id="ch">abcdefg<img /><img />hij</div> 
 
<div id="ad">abc<img />defg<img />hij</div>

jQueryのアプローチ

$(function() { 
 
    function checkConsecutiveImg(str) { 
 
    const $img = $(str).find('img'); 
 
    
 
    return $img[0].nextSibling.nodeType === 1 && $img.next().is('img'); 
 
    } 
 

 
    console.log(`Consecutive images in #ch: ${checkConsecutiveImg('#ch')}`); 
 

 
    console.log(`Consecutive images in #ad: ${checkConsecutiveImg('#ad')}`); 
 
});

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

 
<div id="ch">abcdefg<img /><img />hij</div> 
 
<div id="ad">abc<img />defg<img />hij</div>

Answer 2

あなたは機能.contents()と.is()でそれを達成することができます。

function checkConsecutiveImg(parent) { 
 
    const children = parent.contents(); // e.g. ["abcdefg", <img>, <img>, "hij"] 
 
    let containsConsecutives = false; 
 
     
 
    children.each((index, currentElement) => { 
 
     if ($(currentElement).is('img') && $(children[index - 1]).is('img')) { 
 
      containsConsecutives = true; 
 
     } 
 
    })  
 
     
 
    return containsConsecutives; 
 
} 
 

 
console.log(checkConsecutiveImg($('div#ch'))) 
 
console.log(checkConsecutiveImg($('div#ad')))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="ch">abcdefg<img /><img />hij</div> 
 
<div id="ad">abc<img />defg<img />hij</div>