如何在連續的<input>之間獲得文本/ html？

由於輸入標籤不應該有結束標籤，有沒有一種簡單的方法來提取一系列輸入標籤之間的文本/ HTML？例如，對於下面我想檢索<b>Bob and Tim</b><br>Tim <i>after</i> Bob<br>。如何在連續的<input>之間獲得文本/ html？

<div id="inputs"> 
    <input type="text" value="bob" size="4" /> 
    <b>Bob and Tim</b><br> 
    <input type="text" value="tim" size="4" /> 
    Tim <i>after</i> Bob<br> 
    <input type="button" value="get textbox values" id="mybutton" /> 
</div>

http://jsfiddle.net/gLEZd/5/

我可以得到文本框的值，但如何完成上述？

來源

2012-04-24 Heitor Chang

我想你必須迭代'div＃inputs'的子元素並保留你想要的HTML。或者，您可以克隆該批次，從克隆中去除輸入標籤，然後獲取'。innerHTML' – Rup 2012-04-24 17:04:13

我在你的小提琴中添加了一個新的修訂版本，它可以與克隆和使用innerHTML [小提琴]（http://jsfiddle.net/gLEZd/6/） – 2012-04-24 17:06:49

@TobiasKrogh起作用我一開始沒有看到你的答案。正如我測試它最適用於在之間插入的奇怪的HTML。如果您希望獲得更多代表，請將其添加爲答案。 – 2012-04-24 17:44:42

已經或多或少可以在小提琴中找到，並在評論中聲明。但這裏也爲其他直接用小的解釋代碼：

$("#mybutton").click(function() { 
    var tempContainer = $("#inputs").clone(); 
    tempContainer.find("input").remove(); 
    alert(tempContainer[0].innerHTML); 
});

這樣的容器被克隆，然後輸入您可以通過克隆容器中取出......我們到底有沒有的innerHTML輸入

來源

2012-04-24 17:47:06

與未成年人的標記改變，你可以輕鬆地做到這一點，

HTML：

<div id="inputs"> 
    <input type="text" value="bob" id="bob" size="4" /> 
    <label for="bob"><b>Bob and Tim</b><br></label> 
    <input type="text" value="tim" id="tim" size="4" /> 
    <label for="tim">Tim <i>after</i> Bob<br></label> 
    <input type="button" value="get textbox values" id="mybutton" /> 
</div>

JS：

$("#mybutton").click(function() { 
    $.each($('input[type="text"]'), function() { 
    alert($('label[for=' + this.id + ']').text()); 
    }); 
});

DEMO

櫃面，如果你不喜歡label標籤，然後簡單地將內容像be一樣包裝在一個範圍內低，

<div id="inputs"> 
    <input type="text" value="bob" id="bob" size="4" /> 
    <span><b>Bob and Tim</b><br></span> 
    <input type="text" value="tim" id="tim" size="4" /> 
    <span>Tim <i>after</i> Bob<br></span> 
    <input type="button" value="get textbox values" id="mybutton" /> 
</div>

而且在JS，

$("#mybutton").click(function() { 
    $.each($('input[type="text"]'), function() { 
    alert($(this).next().text()); 
    }); 
});

DEMO

來源

2012-04-24 17:06:05

您的第一個演示是原始小提琴的鏈接。我會修復它，但我不知道鏈接。 – 2012-04-24 17:11:16

@JeffB謝謝..更新小提琴鏈接。 – 2012-04-24 17:13:24

我正在使用您的無標籤演示（JSFiddle＃11）。我不明白爲什麼它會發生，但是當我在Bob和Tim的之後添加「Joe」時，Joe沒有出現在警報中。我確實改變了html（）的text（）。我更新了：http://jsfiddle.net/gLEZd/20/ – 2012-04-24 17:47:59

$("#mybutton").click(function() { 
    var x = $('div#inputs :not(:input)'); 
    $.each(x, function() { 
     console.log(this.innerHTML); 
    }); 
});

UPDATE

$("#mybutton").click(function() { 
    var x = $('div#inputs :not(:input)').filter(function() { 
     return this.toString(); 
    }); 
    console.log(x); // x is the array of DOM Object 
});

來源

2012-04-24 17:06:29 thecodeparadox

@Heitor Chang檢查我的更新.. – thecodeparadox 2012-04-24 17:45:27

理想的情況下，如果信息是李對於輸入元素，你應該使用<label for="">。然後，你可以輕鬆地訪問其關聯的值：

<div id="inputs"> 
    <input id="input1" type="text" value="bob" size="4" /> 
    <label for="input1"><b>Bob and Tim</b><br></label> 
    <input id="input2" type="text" value="tim" size="4" /> 
    <label for="input2 ">Tim <i>after</i> Bob<br></label> 
    <input type="button" value="get textbox values" id="mybutton" /> 
</div>

或者：

$("#mybutton").click(function() { 
    $.each($('input[type="text"]'), function() { 
    alert($(this).next('label').text()); 
    }); 
});

或者：

$("#mybutton").click(function() { 
    $.each($('input[type="text"]'), function() { 
    alert($('label[for='+this.id+']').text()); 
    }); 
});

來源

2012-04-24 17:06:50

不知道這是可取的，但你可以剝離下來到文本像這樣：

alert ($('#inputs').unwrap().text());

Th也會剝離你的<b></b>和其他標籤。

來源

2012-04-24 17:20:54 Marc

如何在連續的<input>之間獲得文本/ html？

回答

相關問題